Angular 源码学习之四： Form

Angular提供了两种表单：模板驱动式表单和响应式表单。

一：Template-Driven Forms (模板驱动表单)

1. 使用简单方便，只需要创建视图模型并通过ngModle指令实现数据双向绑定即可。
2. 由于开发者不用自己手动创建与视图模型相对应的数据模型，所以不易于单元测试

<form name="form" #addAttribute="ngForm">
    <div class="form-group">
        <label>Name *</label>
        <input name="testName" type="text" [(ngModel)]="user.name" required />
        <label>Age *</label>
        <input name="testAge" type="text" [(ngModel)]="user.age" required />
        <label>Gender *</label>
        <input name="testGender" type="text" [(ngModel)]="user.gender" required />
    </div>
</form>

二：Reactive Forms (响应式表单)

1. 既要创建视图模型，又要创建与之对应的数据模型
2. 由于验证逻辑和视图模型分离，开发者可以直接获取数据模型，更利于单元测试

<form [formGroup]="userForm">
    <div class="form-group">
        <label>Name *</label>
        <input name="testName" formControlName="user.name"/>
        <label>Age *</label>
        <input name="testAge" formControlName="user.age"/>
        <label>Gender *</label>
        <input name="testGender" formControlName="user.gender"/>
    </div>
</form>

this.userForm = new FormGroup({
     'user.name': new FormControl(this.user.name, [Validators.required]),
     'user.age': new FormControl(this.user.age, [Validators.required]),
     'user.gender': new FormControl(this.user.gender, [Validators.required]),
});

三：Form结构组成

1: 三种组成单元均继承自AbstractControl。

AbstractControl提供了所有控件和控件组具有的某些共享行为，例如运行验证器，计算状态和重置状态。 它还定义了所有子类之间共享的属性，例如value，valid和dirty。它是抽象类不能直接实例化。

• FormControl：
  这是 Angular 表单的三个最基本的构建块。它扩展了“AbstractControl”类，该类实现了访问值、验证状态、用户交互和事件的大部分基本功能。
• FormGroup

       `FormGroup` 将每个子 `FormControl` 的值聚合到一个对象中，每个控件名称作为键。

• FormArray
  `FormArray` 将每个子 `FormControl`、`FormGroup”或`FormArray`的值聚合到一个数组中。

2: 类图

四：表单中的指令包括共享指令和两种表单各自独有的指令 

1: 两种表单各自独有的指令都继承自AbstractControlDirective

其中模板驱动式表单最大的不同是会自动创建与之对应的数据模型

a:继承关系以及指令说明 

b:AbstractControlDirective类图

2：两种表单共有的指令

a:验证指令

验证指令都实现了Validator接口，而每个验证指令的真正工作的是同一个类Validators

• 类图

• Validators类

b:状态指令

继承自AbstractControlStatus 类,状态指令可以读取控件的其中状态：

c:侦听指令

实现了ControlValueAccessor接口

• ControlValueAccessor类图

d:其他指令