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 對應的代碼
<form nz-form [nzLayout]="validateForm.get('formLayout')?.value" [formGroup]="validateForm" (ngSubmit)="submitForm()" novalidate >
<nz-form-item>
<nz-form-label >用戶名</nz-form-label>
<nz-form-control>
<input nz-input formControlName="name" placeholder="input placeholder">
<nz-form-explain *ngIf="name.dirty && name.errors">Please input your username!</nz-form-explain>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label >手機號</nz-form-label>
<nz-form-control >
<input nz-input formControlName="tell" placeholder="input placeholder">
<nz-form-explain *ngIf="validateForm.get('tell').dirty && validateForm.get('tell').errors && validateForm.controls['tell'].hasError('nomatch')">Please input your Password!</nz-form-explain>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label >身份證</nz-form-label>
<nz-form-control>
<input nz-input formControlName="idCard" placeholder="input placeholder">
<nz-form-explain *ngIf="validateForm.get('idCard').dirty && validateForm.get('idCard').errors ">Please input your Password!</nz-form-explain>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label >性別</nz-form-label>
<nz-radio-group formControlName="gender" nzName="radiogroup">
<label nz-radio nzValue="1">男</label>
<label nz-radio nzValue="2">女</label>
</nz-radio-group>
</nz-form-item>
<nz-form-item>
<nz-form-control >
<button nz-button nzType="primary">Submit</button>
</nz-form-control>
</nz-form-item>
</form>
二、在視圖中引用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
