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