runsly js教程 2021-12-10

深入了解Angular中的表单

本篇文章给大家详细介绍一下Angular中的表单。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

Angular 表单

什么是模板式表单

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

什么是响应式表单

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

数据模型并不是一个任意的对象，它是一个由 angular/forms 模块中的一些特定的类，如 FormControl， FormGroup， FormArray 等组成的。在模板式表单中，是不能直接访问到这些类的。【相关推荐：《angular教程》】
响应式表单并不会替你生成 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);
    }
}

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

更多编程相关知识，请访问：编程视频！！

以上就是深入了解Angular中的表单的详细内容，更多请关注其它相关文章！