angular2+内置表单校验以及自定义表单校验

       表单在web应用中是不可缺少的一部分，提到表单免不了提到表单验证，表单验证能够提高整体数据质量的验证以及用户输入的准确性和完整性。在这里就说一下angular2+内置的几种表单验证以及用户自定义的表单验证，我们先说一下angular内置的表单验证：

1.先引入表单的一些内置依赖

import { FormGroup, FormBuilder,Validators } from '@angular/forms';

2.实例化一个表单，并在构造函数里注入FormBuilder

constructor(private fb:FormBuilder) { }
public myForm: FormGroup;

3.在组件类的初始化函数里对表单中的元素的校验进行定义，并调用表单的valueChanges方法，检测表单的输入的变化

ngOnInit():void {
  this.taskInfo.isComplete = 1;
  this.tasksForm = this.fb.group({
    "title": [
      '',
      [
        Validators.required,//字段必须输入
        Validators.minLength(5),//最小长度
        Validators.maxLength(32)//最大长度
      ]
    ],
    "content": [
      '',
      [
        Validators.required,
        Validators.minLength(2),
        Validators.maxLength(64)
      ]
    ]
  });
  this.myForm.valueChanges.subscribe(data => this.onValueChanged(data));
  this.onValueChanged();
}

4.定义下需要错误提示的字段以及在每一种不同的错误情况下应该提示什么信息

formErrors = {
  'title': '',
  'content': ''
};

validationMessages = {
  'title': {
    'required':      'title is required.',
    'minlength':     'title must be at least 5 characters long.',
    'maxlength':     'title cannot be more than 32 characters long.',
  },
  'content': {
    'required': 'content is required.',
    'minlength':     'title must be at least 2 characters long.',
    'maxlength':     'title cannot be more than 64 characters long.',
  },
};

5.定义OnValueChanged 方法，对表单的输入变化进行处理

onValueChanged(data?:any){
  if (!this.tasksForm) { return; }
  const form = this.tasksForm;

  for (const field in this.formErrors) {
    this.formErrors[field] = '';// 清空上一次的错误信息
    const control = form.get(field);//调用FormGroup的get方法得到某一个需要校验的表单字段
    if (control && control.dirty && !control.valid) {//给验证不合格的字段赋错误信息值
      const messages = this.validationMessages[field];
      for (const key in control.errors) {
        this.formErrors[field] += messages[key] + ' ';
      }
    }
  }
}

6.html表单页面的编写 (提交按钮先要判断表单校验有没有通过，如果没有通过就将表单提交按钮禁用)

<form [formGroup]="myForm"  (ngSubmit)="onSubmit(myForm.value)"
      role="form" novalidate>
  <input class="detail_title" type="text" formControlName="title">
  <div *ngIf="formErrors.title" class="alert alert-danger">
    {{ formErrors.title }}
  div>
  <input class="detail_title" type="text" formControlName="content">
  <div *ngIf="formErrors.content" class="alert alert-danger">
    {{ formErrors.content }}
  div>
    <div class="task_operate_button">
      <button  type="button" type="submit"  [disabled]="!myForm.valid">button>
    div>
form>

这就完成了一个简单的内置表单校验。内置的表单校验还有其他的。这里我就简单举这几个例子

下面我们来说一下自定义表单校验 (以E-mail校验来举例吧，虽然Email也有内置的验证)

 自定义校验也很简单，只需要定义一个方法，这个方法接收一个参数，这个参数的类型是FormControl类型的。如果校验通过，则返回null，校验失败，则返回一个对象，话不多说，上代码

validateEmail(c: FormControl) {
  let EMAIL_REGEXP = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
  return EMAIL_REGEXP.test(c.value) ? null : {
  validateEmail: {
    valid: false
  }
};

在初始化函数中增加一个表单校验的验证器

在错误信息中增加一条

这就完成了angular2+表单的自定义校验