Angular 学习（十）：Angular 表单

红太狼 2021-09-29 11:50 553阅读 0赞

# Angular 表单 #

### 什么是模板式表单 ###

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

### 什么是响应式表单 ###

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

*  数据模型并不是一个任意的对象， 它是一个由 angular/forms 模块中的一些特定的类， 如 FormControl， FormGroup， FormArray 等组成的。 在模板式表单中， 是不能直接访问到这些类的。
 *  响应式表单并不会替你生成 HTML， 模板仍然需要自己来编写。
 *  模板式表单中， 是不能访问数据模型的相关类的， 只能拿到表单最终的数据； 在响应式表单中， 是可以访问数据模型相关的类， 但由于它们是不可引用的， 故不能在模板中进行操作， 只能在 TypeScript 代码中进行操作。

### 响应式表单 ###

![响应式表单][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29zY2hpbmFfNDE3OTA5MDU_size_16_color_FFFFFF_t_70]

##### 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);
        }
    }

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29zY2hpbmFfNDE3OTA5MDU_size_16_color_FFFFFF_t_70]: /images/20210920/f6c48564835640a99ce116e29389976e.png