Angular表单验证

angular的表单验证由验证器Validators模块提供，所以如果你的表单需要验证就要将此模块引入

import { Validators} from '@angular/forms';

一、想使用验证器需要做两件事

1.为FormControl对象指定验证器；
2.在试图中检查验证器状态，并根据状态来做不同的提示操作；

//1.    对应代码
//其中  match为  自定义验证器；
validateForm : FormGroup;
  name:AbstractControl;
  constructor(private fb: FormBuilder,) { 
      this.validateForm = this.fb.group({
          formLayout: [ 'horizontal' ],
          name: ['', Validators.required],
          tell: ['',Validators.compose([Validators.required,match])],
          gender:['1',Validators.required],
         idCard:['', Validators.required],
      });
      this.name = this.validateForm.controls['name'];
  }

// 2 对应的代码

        
            用户名
            
                
                Please input your username!
            
        
        
            手机号
            
                
                Please input your Password!
            
        
        
            身份证
            
                
                Please input your Password!
            
        
        
            性别
            
                男
                女
            
        
        
            
                Submit
            
        
    

二、在视图中引用FormControl有三种方法：

1.如上面例子里的 name 属性；
首先得引入AbstractControl这个抽象控制器模块用来表单验证,且将name设置为实例变量,而后将FormControl对象赋值给name。最后就可以在仕途上直接引用name 如：name.dirty && name.errors

import {
  AbstractControl, //加入此语句
  FormBuilder,
  FormGroup,
  Validators
} from '@angular/forms';
........
name:AbstractControl;//将name设置为实例变量
this.name = this.validateForm.controls['name'];//将FormControl对象赋值给name

2.使用FormGroup对象的get()方法

validateForm.get('tell').dirty ；

3.使用FormGroup对象的controls()方法

validateForm.controls['tell'].hasError('nomatch')

三、自定义表单验证器

自定义验证上述代码中 tell 手机号

//nomatch.ts文件
import {
  FormControl,
} from '@angular/forms';
export const match = (control: FormControl): {[key: string]: boolean} => {
  const tell = control.value;
   if(!(/^1(3|4|5|7|8)\d{9}$/.test(tell))){
      return { nomatch: true };
   }else {
      return null;//这里一定是null
   }
};

自定义表单验证器时需要用到Validators.compose在同一字段上添加多个验证器,如：

  tell: ['',Validators.compose([Validators.required,match])],

而后便可以在视图中引用

validateForm.controls['tell'].hasError('nomatch')

四、Angular自带的验证器

1.required()
Validators.required
2.min()
Validators.min(3)
3.max()
Validators.max(15)
4.email()
Validators.email
5.minLength()最小值
Validators.minLength(4)
6.maxLength()最大值
Validators.maxLength(12)
7.compose组合
Validators.compose([Validators.required,match])
8.pattern()正则
Validators.pattern(RegExp)
9.requiredTrue()value值为true
Validators.requiredTrue