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(''), }); }
现在这些单独的控件FormControl被收集到了一个控件组中FormGroup， FormGroup 实例拥有和 FormControl 实例相同的属性（比如 value、untouched）和方法（比如 setValue()）。
3>：关联FormGroup的模型和视图
FormGroup能追踪每个单独控件FormControl的状态和变化，如果其中某个控件的状态或值变化了，父控件也会一次新的状态变更或值变更事件
<form [formGroup]="profileForm"> <label> First Name: <input type="text" formControlName="firstName"> </label> <label> Last Name: <input type="text" formControlName="lastName"> </label> </form>
profileForm通过[formGroup]指令绑定到了 form元素，在该模型和表单中的输入框之间创建了一个通讯层，FormControlName 指令提供的 formControlName 属性把每个输入框和 FormGroup 中定义的表单控件绑定起来。
4>：关联FormGroup的模型和视图
html
<form [formGroup]="profileForm" (ngSubmit)="onSubmit()"> <label> First Name: </label> <input type="text" formControlName="firstName"> <label> Last Name: </label> <input type="text" formControlName="lastName"> <button type="submit" >Submit</button> </form>
js
onSubmit () { console.warn(this.profileForm.value); }
form 标签所发出的 submit 事件是原生 DOM 事件，通过点击类型为 submit 的按钮可以触发本事件
6：嵌套的表单组
js
profileForm = new FormGroup({ firstName: new FormControl(''), lastName: new FormControl(''), address: new FormGroup({ street: new FormControl(''), city: new FormControl(''), state: new FormControl(''), zip: new FormControl('') }) });
html