Angular Session 5 - 表单

用表单处理用户输入是许多常见应用的基础功能。 应用通过表单来让用户登录、修改个人档案、输入敏感信息以及执行各种数据输入任务。

Angular表单的优点

1. 收集用户输入的表单数据，在 Angular 中通过 ngModel 语法糖实现双向绑定非常方便；
   2. 通过各种验证器验证表单元素输入的数据是否合法，Angular 内置了常用的验证器（required、pattern、email，min，max，minlength，maxlength）；

Angular 提供了两种不同的方法来通过表单处理用户输入：响应式表单和模板驱动表单。

响应式表单

首先在app.module.ts文件引入FormsModule，ReactiveFormsModule这两个模块

// app.module.ts
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
        imports: [
        FormsModule,
        ReactiveFormsModule
    ]
})

在需要加载表单的页面内引入：

import { FormControl, FormGroup, Validators } from '@angular/forms';
// FormControl 用于追踪/监控单个表单控件的值和验证状态。（例如：监控一个input框等）
// FormGroup 把每个子 FormControl 的值聚合进一个对象，它的 key 是每个控件的名字。
        用于追踪一个表单控件组的值和状态。（例如:监控一个form里面的所有input）
      它通过归集其子控件的状态值来计算出自己的状态。如果组中的任何一个控件是无效的，那么整个组就是无效的。

创建输入框

<!-- .html -->
<input type="text" [formControl]="job">

// .ts
job: any;
ngOnInit() {
  this.job = new FormControl('');
}

添加校验规则

<!-- .html -->
<input type="text" [formControl]="job">
<span *ngIf="job.errors?.required">输入不能为空</span>
<span *ngIf="job.errors?.maxlength">最多10个字符</span>

// .ts
job: any;
ngOnInit() {
  this.job = new FormControl('', [Validators.required, Validators.maxLength(10)]);
}

创建表单

响应式表单提供了 FormGroup 用于跟踪一组 FormControl 实例的值和有效性状态。FormGroup 的 key 就是每个子控件的名称，通过 [formControlName] 指令与视图中的表单元素关联。

<!-- .html -->
<div [formGroup]="myForm">
    <input type="text" formControlName="name">
    <div>
        <span *ngIf="myForm.controls.name.errors?.required">输入不能为空</span>
        <span *ngIf="myForm.controls.name.errors?.maxlength">最多10个字符</span>
    </div>
</div>

// .ts
myForm: any;
ngOnInit() {
  this.myForm = new FormGroup({
    name:new FormControl('', [Validators.required, Validators.maxLength(10)])
  })
}

对表单分组

表单组可以同时接受单个表单控件实例和其它表单组实例作为其子控件。FormGroup 实例中可以嵌套 FormGroup 实例，形成嵌套的表单组。

<!-- .html -->
<div [formGroup]="myForm">
      <!-- <input type="text" formControlName="name">
    <div>
        <span *ngIf="myForm.controls.name.errors?.required">输入不能为空</span>
        <span *ngIf="myForm.controls.name.errors?.maxlength">最多10个字符</span>
    </div> -->
    <div formGroupName="username" class="form-group">
        <input type="text" placeholder="First Name" formControlName="first">
        <div>
            <span *ngIf="myForm.controls?.username.controls.first.errors?.required">输入不能为空</span>
            <span *ngIf="myForm.controls?.username.controls.first.errors?.maxlength">最多10个字符</span>
        </div>
        <input type="text" placeholder="Last Name" formControlName="last">
        <div>
            <span *ngIf="myForm.controls?.username.controls.last.errors?.required">输入不能为空</span>
            <span *ngIf="myForm.controls?.username.controls.last.errors?.maxlength">最多10个字符</span>
        </div>
    </div>
    <input type="password" formControlName="password">
    <div>
        <span *ngIf="myForm.controls.password.errors?.required">输入不能为空</span>
        <span *ngIf="myForm.controls.password.errors?.pattern">请输入6位数字</span>
    </div>
</div>

// .ts
myForm: any;
ngOnInit() {
  this.myForm = new FormGroup({
    name: new FormControl('', [Validators.required, Validators.maxLength(10)]),
    username: new FormGroup({
      first: new FormControl('', [Validators.required, Validators.maxLength(10)]),
      last: new FormControl('', [Validators.required, Validators.maxLength(10)]),
    }),
    password: new FormControl('', [Validators.required, Validators.pattern(/^\d{6}$/)])
  })
}

使用 FormBuilder 服务生成控件

当我们需要创建多个表单控件实例时，代码会显得会比较臃肿。FormBuilder 提供了一个语法糖，以简化 FormControl、FormGroup 或 FormArray 实例的创建过程。下面我们用它来重构一下上面的表单创建

// 引入FormBuilder
import { FormControl, FormGroup, Validators, FormBuilder } from '@angular/forms';
constructor(private fb: FormBuilder) {
  this.myForm = fb.group({
    name: ['', [Validators.required, Validators.maxLength(10)]],
    username: fb.group({
      first: ['', [Validators.required, Validators.maxLength(10)]],
      last: ['', [Validators.required, Validators.maxLength(10)]],
    }),
    password: ['', [Validators.required, Validators.pattern(/^\d{6}$/)]]
  })
}

模板驱动表单

模板驱动表单和 AngularJS 中的表单相似，通过 NgModel 指令来实现双向绑定。
模板驱动方法，FormControl 对象会被 NgModel 指令隐式创建

创建表单

在使用 form 标签后，其中通过 NgModel 指令双向绑定的表单控件必须添加 name 属性。通过把 ngForm 导出成局部模板变量来查看表单的状态。

<!-- .html -->
<form #userInfo="ngForm">
    <input type="text" placeholder="Username" [(ngModel)]="username" required maxlength="10" name="username">
    <div>
        <span *ngIf="userInfo.controls.username?.errors?.required">输入不能为空</span>
    </div>
    <input type="password" placeholder="Password" [(ngModel)]="password" required pattern="^\d{6}$" name="password">
    <div>
        <span *ngIf="userInfo.controls.password?.errors?.required">输入不能为空</span>
        <span *ngIf="userInfo.controls.password?.errors?.pattern">请输入6位数字</span>
    </div>
</form>
<pre>Form Value: {{ userInfo.value | json }}</pre>
<pre>Form Valid: {{ userInfo.valid }}</pre>

// .ts
username = '';
password = '';

对表单分组

在模板驱动表单中对表单控件进行分组需要使用 NgModelGroup 指令。该指令只能用作 NgForm 的子级（在
标签内），相当于响应式表单中的 FormGroupName 指令。

<!-- .html -->
<form #userInfo="ngForm">
    <div ngModelGroup="username" class="form-group">
        <input type="text" placeholder="First Name" [(ngModel)]="username.first" required maxlength="10" name="first">
        <div>
            <span *ngIf="firstEmptyShow(userInfo)">输入不能为空</span>
        </div>
        <input type="text" placeholder="Last Name" [(ngModel)]="username.last" required maxlength="10" name="last">
        <div>
            <span *ngIf="lastEmptyShow(userInfo)">输入不能为空</span>
        </div>
    </div>
    <input type="password" placeholder="Password" [(ngModel)]="password" required pattern="^\d{6}$" name="password">
    <div>
        <span *ngIf="userInfo.controls.password?.errors?.required">输入不能为空</span>
        <span *ngIf="userInfo.controls.password?.errors?.pattern">请输入6位数字</span>
    </div>
</form>
<pre>Form Value: {{ test(userInfo) }}</pre>
<pre>Form Valid: {{ userInfo.valid }}</pre>

// .ts
username = { first: '', last: '' };
password = '';
firstEmptyShow(userInfo:any){
      return userInfo.controls.username?.controls.first.errors?.required
}
lastEmptyShow(userInfo:any) {
    return userInfo.controls.username?.controls.last.errors?.required
}

表单验证

响应式表单验证

constructor(private fb: FormBuilder) {
  this.myForm = fb.group({
    name: ['', [
      Validators.required,
      Validators.maxLength(10),
        customValidator // <-- Here's how you pass in the custom validator.]],
  })
}

自定义验证器

forbiddenAll(): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    console.log(control.value ? {forbiddenAll: {value: control.value}} : null)
    return control.value ? {forbiddenAll: {value: control.value}} : null;
  };
}

模板驱动表单验证

通过把 ngModel 导出成局部模板变量来查看该控件的状态。 比如下面这个例子就把 NgModel 导出成了一个名叫 name 的变量：

<input type="text" id="name" name="name" class="form-control"
      required minlength="4" appForbiddenName="bob"
      [(ngModel)]="hero.name" #name="ngModel">
<div *ngIf="name.invalid && (name.dirty || name.touched)"
    class="alert">
  <div *ngIf="name.errors?.required">
    Name is required.
  </div>
  <div *ngIf="name.errors?.minlength">
    Name must be at least 4 characters long.
  </div>
  <div *ngIf="name.errors?.forbiddenName">
    Name cannot be Bob.
  </div>
</div>

自定义验证器

创建一个自定义验证器

ng generate directive forbidden-name

创建validator.ts文件，提供验证器算法

 //  validator.ts
import { ValidatorFn, AbstractControl } from '@angular/forms';
export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
    // 返回一个具有验证性函数
    return (control: AbstractControl): { [key: string]: any } | null => {
        console.log("control.value=",control.value)
        // control.value控件的值
        const forbidden = nameRe.test(control.value);
        console.log("forbidden=",forbidden)
        // 下面是三目运算符，当forbidden为false的时候，返回null，当forbidden为true的时候，返回{'forbiddenNAme':{value:control.value}}
        return forbidden ? { 'forbiddenName': { value: control.value } } : null;
    };
}

在自定义验证器中继承该算法并实现一个接口

// forbidden-name.directive.ts
import { Directive, Input } from '@angular/core';
import { NG_VALIDATORS, Validator, AbstractControl} from '@angular/forms';
import { forbiddenNameValidator } from './main/validator';
@Directive({
  selector: '[appForbiddenName]',  // 指令作为属性使用
  // 实现Validator接口之后，要能够给全局的模板都能够实现，要注册。注册的密钥是angular固定提供的一种NG_VALIDATORS。注册的具体语句：
  providers:[{provide:NG_VALIDATORS,useExisting:ForbiddenNameDirective,multi:true}]
})
export class ForbiddenNameDirective implements Validator {
  @Input('appForbiddenName') forbiddenName: string = '';   // 获取指令值
  // 指令实现接口，也就是说，在调用这条指令的时候，就已经能够启动这个函数
  validate(control: AbstractControl): {[key: string]: any} | null {
    // 键值对：map[key:string]any   {[key: string]: any} | null接收返回值的类型有键值对或者是NULL
    console.log("control:",control)
    console.log("forbiddenName=",this.forbiddenName)
    // 还是三目运算符，this.forbidden为空的时候，不进行匹配
    return this.forbiddenName ? forbiddenNameValidator(new RegExp(this.forbiddenName, 'i'))(control): null;
  }
  constructor() { }
}

使用模板自定义的方法

<form #userInfo="ngForm">
    <input type="text" placeholder="Username" [(ngModel)]="username" required maxlength="10" name="username" appForbiddenName="bob">
    <div>
        <span *ngIf="userInfo.controls.username?.errors?.required">输入不能为空</span>
        <!-- <span *ngIf="userInfo.controls.username?.errors?.required">输入不能为空</span> -->
        <span *ngIf="userInfo.controls.username?.errors?.forbiddenName">no bob</span>
    </div>
    <input type="password" placeholder="Password" [(ngModel)]="password" required pattern="^\d{6}$" name="password">
    <div>
        <span *ngIf="userInfo.controls.password?.errors?.required">输入不能为空</span>
        <span *ngIf="userInfo.controls.password?.errors?.pattern">请输入6位数字</span>
    </div>
</form>

总结

响应式表单和模板驱动表单以不同的方式处理和管理表单数据。每种方法都有各自的优点。

响应式表单提供对底层表单对象模型直接、显式的访问。它们与模板驱动表单相比，更加健壮：它们的可扩展性、可复用性和可测试性都更高。如果表单是你的应用程序的关键部分，或者你已经在使用响应式表单来构建应用，那就使用响应式表单。

模板驱动表单依赖模板中的指令来创建和操作底层的对象模型。它们对于向应用添加一个简单的表单非常有用，比如电子邮件列表注册表单。它们很容易添加到应用中，但在扩展性方面不如响应式表单。如果你有可以只在模板中管理的非常基本的表单需求和逻辑，那么模板驱动表单就很合适。

动态表单

工作中可能会存在以下场景：
在确定表单使用的组件的情况下，根据后端返回的数据，自由排列组合生成一个新表单：

比如后端返回了以下数据，规定了每种数据需要使用的控件类型：

// mockData
response = [
        {
            key: 'username',
            controlType: 'input',
            label: '用户名',
            value: ''
        },
        {
            key: 'area',
            controlType: 'select',
            label: '地区',
            option: [{
                label: '国内',
                value: 'china'
            },{
                label: '国外',
                value: 'foreign'
            }],
            value: ''
        },
        {
            key: 'isAdult',
            controlType: 'radio',
            label: '是否成年',
            checkList: [{
                label: 'Yes',
                value: 'yes'
            },{
                label: 'No',
                value: 'no'
            }],
            value: ''
        }
]

我们只需要根据这个数据生成一个formgroup：

//循环控件加到formgroup上
toFormGroup(){
        let group: any = {};
        this.response.forEach(item => {
            group[item.key] = new FormControl("");
        });
        this.dynamicForm = new FormGroup(group);
}

在form上绑定这个formGroup，并通过ngSwitch根据条件按需加载即可：

<form (ngSubmit)="onSubmit()" [formGroup]="dynamicForm">
    <div *ngFor="let item of response">
        <label>{{item.label}}:</label>
        <div [ngSwitch]="item.controlType">
            <!--通过判断类型来显示哪种表单-->
            <input *ngSwitchCase="'input'" type="text" [(ngModel)]="item.value" [formControlName]="item.key">
            <select *ngSwitchCase="'select'" [formControlName]="item.key">
                <option *ngFor="let option of item.option" [ngValue]="option">
                    {{ option.label }}
                </option>
            </select>
            <div *ngSwitchCase="'radio'">
                <div *ngFor="let child of item.checkList">
                    <input type="radio" [value]="child.value" [formControlName]="item.key">{{ child.label }}
                </div>
            </div>
        </div>
    </div>
    <button type="submit">保存</button>
</form>