Angular2响应式表单FormGroup和FormArray学习记录

       响应式表单提供了一种模型驱动的方式来处理表单输入，其中的值会随时间而变化,从理解上来看应该是重脚本而轻模板。 FormControl，FormGroup，FormArray都适用于创建响应式表单，可以用他们统一管理form表单的状态和值。

响应式表单简介

响应式表单使用显式的、不可变的方式，管理表单在特定的时间点上的状态。对表单状态的每一次变更都会返回一个新的状态，这样可以在变化时维护模型的整体性。响应式表单是围绕 Observable 的流构建的，表单的输入和值都是通过这些输入值组成的流来提供的，它可以同步访问。

响应式表单还提供了一种更直观的测试路径，因为在请求时你可以确信这些数据是一致的、可预料的。这个流的任何一个消费者都可以安全地操纵这些数据。

响应式表单与模板驱动的表单有着显著的不同点。响应式表单通过对数据模型的同步访问提供了更多的可预测性，使用 Observable 的操作符提供了不可变性，并且通过 Observable 流提供了变化追踪功能。

FormControl、FormGroup、FormArray的依赖

       他们三个都是由ReactiveFormsModule模块提供，使用前需要在相应的模块中引入依赖。

import { ReactiveFormsModule } from '@angular/forms';@NgModule({imports: [// other imports ...ReactiveFormsModule],
})
export class AppModule { }

FormControl，FormGroup，FormArray的应用场景

       FormControl用于创建单个的元素控件实例，对单个控件进行赋值，取值，添加同步或异步校验，详细参见 Angular文档FormControl ；

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';@Component({selector: 'app-name-editor',templateUrl: './name-editor.component.html',styleUrls: ['./name-editor.component.css']
})
export class NameEditorComponent {name = new FormControl('');// 为控件赋值updateName() {this.name.setValue('Nancy');}
}

<label>Name:<input type="text" [formControl]="name">
</label>
<p>Value: {{ name.value }}
</p>

       FormGroup用于创建一组的元素控件，并可以对这一组控件进行整体的赋值，取值，验证等操作，还可以通过嵌套组件的方式构建层级结构的控件组,对于使用FormGroup嵌套需要用到FormGroupName指令，其内部依赖于FormControl；详细参见Angular文档 FormGroup

    有两种更新模型值的方式：

• 使用 setValue() 方法来为单个控件设置新值。 setValue() 方法会严格遵循表单组的结构，并整体性替换控件的值。

• 使用 patchValue() 方法可以用对象中所定义的任何属性为表单模型进行替换。

  setValue() 方法的严格检查可以帮助你捕获复杂表单嵌套中的错误，而 patchValue() 在遇到那些错误时可能会默默的失败。

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';@Component({selector: 'app-profile-editor',templateUrl: './profile-editor.component.html',styleUrls: ['./profile-editor.component.css']
})
export class ProfileEditorComponent {profileForm = new FormGroup({firstName: new FormControl(''),lastName: new FormControl(''),// 创建嵌套分组组件address: new FormGroup({street: new FormControl(''),city: new FormControl(''),state: new FormControl(''),zip: new FormControl('')})});updateProfile() {this.profileForm.patchValue({firstName: 'Nancy',address: {street: '123 Drew Street'}});}onSubmit() {console.warn(this.profileForm.value);}
}

<form [formGroup]="profileForm" (ngSubmit)="onSubmit()"><label>First Name:<input type="text" formControlName="firstName"></label><label>Last Name:<input type="text" formControlName="lastName"></label><!-- 嵌套分组组件的应用 --><div formGroupName="address"><h3>Address</h3><label>Street:<input type="text" formControlName="street"></label><label>City:<input type="text" formControlName="city"></label><label>State:<input type="text" formControlName="state"></label><label>Zip Code:<input type="text" formControlName="zip"></label></div><p><button (click)="updateProfile()">Update Profile</button></p><button type="submit" [disabled]="!profileForm.valid">Submit</button>
</form>

        FormBuilder提供一种相对简单的方式用来创建FormControl和FormGroup以及FormArray；详细参见Angular文档 FormBuilder

       手动创建多个表单控件实例会非常繁琐。FormBuilder 服务提供了一些便捷方法来生成表单控件。FormBuilder 在幕后也使用同样的方式来创建和返回这些实例，只是用起来更简单。

FormBuilder 服务有三个方法：control()、group() 和 array()。这些方法都是工厂方法，用于在组件类中分别生成 FormControl、FormGroup 和 FormArray。

       通过使用FormBuilder可以将上面的 FormGroup方式创建的组件简化成下方的样式，以此减少一些重复代码；

import { Component } from '@angular/core';
import { FormBuilder } from '@angular/forms';
import { Validators } from '@angular/forms';@Component({selector: 'app-profile-editor',templateUrl: './profile-editor.component.html',styleUrls: ['./profile-editor.component.css']
})
export class ProfileEditorComponent {profileForm = this.fb.group({firstName: ['', Validators.required],lastName: [''],address: this.fb.group({street: [''],city: [''],state: [''],zip: ['']}),});constructor(private fb: FormBuilder) { }
}

       FormArray，基于此管理表单或列表的动态组件列表，虽然没有试过但看其模式应该是可以用来做动态表格，或者div块的内容的验证和管理；用到的指令formArrayName 详细参见Angular文档 FormArray

profileForm = this.fb.group({firstName: ['', Validators.required],lastName: [''],address: this.fb.group({street: [''],city: [''],state: [''],zip: ['']}),aliases: this.fb.array([this.fb.control(''),this.fb.control('')])
});

        可以通过添加getter取值方法来代替操控FormArray对象句柄时的长语句,以达到优化代码的目的.

get aliases() {return this.profileForm.get('aliases') as FormArray;
}
addAlias() {this.aliases.push(this.fb.control(''));
}

<div formArrayName="aliases"><h3>Aliases</h3> <button (click)="addAlias()">Add Alias</button><div *ngFor="let alias of aliases.controls; let i=index"><!-- The repeated alias template --><label>Alias:<input type="text" [formControlName]="i"></label></div>
</div>

 以上