angular6的响应式表单的实现

1：在AppModule模块里面引入 ReactiveFormsModule

要使用响应式表单，就要从@angular/forms包中导入ReactiveFormsModule，并把它添加到你的NgModule的imports数组中。

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

2：创建一个新的组件

ng g c NameEditor

3：请在组件中导入 FormControl 类

FormControl类是angular响应式表单最基本的构造快，要注册单个的表单控件，请在组件中导入FormControl类，并创建一个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('');} 

4:在组件的模板中注册一个表单控件

修改模板，为表单控件添加 formControl 绑定，formControl 是由 ReactiveFormsModule 中的 FormControlDirective 提供的。

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

使用这种模板绑定语法，把该表单控件注册给了模板中名为 name 的输入元素。这样，表单控件和 DOM
元素就可以互相通讯了：视图会反映模型的变化，模型也会反映视图中的变化。

5：替换表单控件的值

FormControl 提供了一个setValue()方法，他会修改这个表单控件的值。

js

 updateName() {  this.name.setValue('Nancy'); }

html

<label> Name: <input type="text" [formControl]="name"></label><p> Value:{{name.value}}</p><p> <button (click)="updateName()">Update Name</button></p>

在这个例子中，你只使用单个控件FormControl，但是当调用 FormGroup 或 FormArray 的 setValue()方法时，传入的值就必须匹配控件组或控件数组的结构才行

6：把表单控件分组

FormControl的实例能控制单个输入框所对应的控件，FormGroup可以控制一组FormControl实例的表单状态，当创建FormGroup时，其中的每一个控件都会根据名字进行跟踪

1>：创建新的组件

ng g c ProfileEditor

2>：导入 FormGroup 和 FormControl 类并且创建 FormGroup实例

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(''), });}