Angular 表单

什么是模板式表单

表单的数据模型是通过组件模板中的相关指令来定义的， 因为使用这种方式定义表单的数据模型时， 我们会受限于 HTML 的语法， 所以模板驱动方式只适合用于一些简单的场景。

什么是响应式表单

响应式表单提供了一种模型驱动的方式来处理表单输入， 其中的值会随时间而变化。 使用响应式表单时， 通过编写 TypeScript 代码而不是 HTML 代码来创建一个底层的数据模型， 在这个模型定义好以后， 使用一些特定的指令， 将模板上的 HTML 元素与底层的数据模型连接在一起。
注意：

• 数据模型并不是一个任意的对象， 它是一个由 angular/forms 模块中的一些特定的类， 如 FormControl， FormGroup， FormArray 等组成的。 在模板式表单中， 是不能直接访问到这些类的。

• 响应式表单并不会替你生成 HTML， 模板仍然需要自己来编写。

• 模板式表单中， 是不能访问数据模型的相关类的， 只能拿到表单最终的数据； 在响应式表单中， 是可以访问数据模型相关的类， 但由于它们是不可引用的， 故不能在模板中进行操作， 只能在 TypeScript 代码中进行操作。

响应式表单

FormGroup

FormGroup 既可以代表表单的一部分， 又可以代表整个表单， 它是多个 FormControl 的集合。 FormGroup 将多个 FormControl 的值和状态聚合在一起， 在表单校验中， 如果FormGroup 中有一个 FormControl 是无效的， 那整个 FormGroup 都是无效的。

FormControl

FormControl 是构成表单的基本单位， 通常情况下用来代表一个 input 元素， 但是也可以用来代表一个更复杂的组件， 如日历， 下拉选择框。 FormControl 保存着与其关联的 HTML 元素的当前值以及元素的校验状态， 还有元素是否被修改过等信息。

FormArray

FormArray 与 FormGroup 类似， 但是它有长度属性。 一般来说， FormGroup 用来代表整个表单或者表单字段的一个固定子集； 而 FormArray 通常用来代表一个可以增长的字段集合。

表单校验

Angular 内置校验器

Angular为我们提供了几个内置校验器, 下面是比较常用的校验器:

• Validators.required - 表单控件值非空
• Validators.email - 表单控件值的格式是 email
• Validators.minLength() - 表单控件值的最小长度
• Validators.maxLength() - 表单控件值的最大长度
• Validators.pattern() - 表单控件的值需匹配pattern对应的模式（正则表达式）

自定义响应式表单校验器

在实际的开发中， 为了满足项目的需求， 我们需要自定义一些校验器。 一般情况下， 可以将校验函数定义成如下形式：

xxxxValidator(control: AbstarctControl): {[key: string]: any} {    // TODO 编写校验规则   return null;  }

下面以常见的注册页面为例：

初始化表单

ngOnInit(): void {  this.formModel = this.fb.group({    username: ['', [Validators.required, Validators.minLength(6)]],    // 密码    passwordsGroup: this.fb.group({     password: [''],  passwordConfirm: [''] }, { validator: this.equalValidator }),    // 手机号    mobile: ['', this.moblieValidator]  });}

编写校验器

// 手机号码校验
moblieValidator(control: AbstractControl): any {  const reg = /^((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8}$/;  const valid = reg.test(control.value);  console.log('mobile的校验结果：', valid); return valid ? null : { mobile: true };
}// 密码校验
equalValidator(group: FormGroup): any {  const password = group.get('password') as FormControl;  const passwordConfirm = group.get('passwordConfirm') as FormControl;  const valid = password.value === passwordConfirm.value;  console.log('密码校验结果', valid);  return valid ? null : { equal: true };
}

Angular 异步校验器

Angular的表单 API 还支持异步校验器， 异步校验器可以调用远程的服务来检查表单的字段的值。 异步校验器与普通校验器类似， 也是一个方法， 唯一不同的是异步校验器返回的不是一个对象， 而是一个可观测的流。

moblieAsyncValidator(control: AbstractControl): Observable<any> {  const reg = /^((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8}$/;  const valid = reg.test(control.value);  console.log('mobile的校验结果：', valid); return of(valid ? null : { mobile: true }); }

Angular 状态字段

• touched 和 untouched

这两个字段表示用户是否访问过字段， 也就是这个字段是否获得焦点。 一般用于表单错误提示信息是否显示。 同时， 如果有任何一个字段是 touched， 那整个表单的 touched 属性就是 true； 只有所有字段是 untouched 时， 整个表单的 untouched 属性才是 true。

• pristine 和 dirty

如果一个字段的值从来没有改变过， 那么它的 pristine 就是 true， dirty 就是 false； 反之， 如果字段的值被修改过， 那么它的pristine 就是 false， dirty 就是 true。 同时， 如果任何一个字段是 dirty， 那么整个表单的 dirty 属性就是 true； 只有所有字段是 pristine 时， 整个表单的 pristine 属性才是 true。

• pending

当一个字段处于异步校验时， 该字段的 pending 属性是 true。

自定义模板式表单的校验器

在响应式表单里， 我们后台有一个编码的数据模型， 只需要将校验器的方法挂在指定字段属性上就可以了。 但是， 在模板式表单里， 后台是没有这类数据模型的， 指令才是唯一能用的东西， 所以我们需要将校验方法包装成指令， 然后才能在模板中使用它。

编写指令

@Directive({  selector: '[mobile]', providers: [{provide: NG_VALIDATORS, useValue: moblieValidator, multi: true}]})export class MobileValidatorDirective {  constructor() { }}// html中引用
<div>  手机号:<input ngModel type="number" name="mobile" mobile required></div>

mutli: true ：指的是在 NG_VALIDATORS 这个 Token 下可以挂不同 useValue 属性所表示的值。

注意: 在模板式表单中， 是不可以在模板中使用字段的状态属性的。 模板式表单与响应式表单不同， 它的模型的值和它状态的变更是异步的， 而且很难控制。
如果想要使用字段的状态属性，我们可以进行如下操作：

// .html文件中
<div>  用户名:<input ngModel type="text" minlength="6" name="username" (input)="onUsernameInput(myForm)" required>
</div>
<div [hidden]="usernameValid || usernameUntouched">  <div [hidden]="!myForm.form.hasError('required', 'username')">用户名是必填项！</div>  <div [hidden]="!myForm.form.hasError('minlength', 'username')">用户名长度至少是6位！</div>
</div>
// .ts文件中
usernameValid = true; 
usernameUntouched = true; 
onUsernameInput(form: NgForm): void {  if (form) {this.usernameValid = form.form.get('username').valid;    console.log('valid', this.usernameValid);          this.usernameUntouched = form.form.get('username').untouched;   console.log('untouched',   this.usernameUntouched);}
}

小结: 在使用字段的状态属性时， 响应式表单比模板式表单更方便，可以节省很多代码，而且比较可控。所以模板式表单适合用于一些简单的场景。