注：下面我说的Form表单的用法是在一个完整的项目中的用法
1、引入组件
在 app.module.ts 文件中引入组件，代码如下所示：
import {FormsModule, ReactiveFormsModule} from '@angular/forms'; imports: [ FormsModule， ReactiveFormsModule ], 在当前页面引入（你需要使用该组件的页面），代码如下所示：
import {FormBuilder, FormGroup, Validators, FormControl} from '@angular/forms'; 2、使用
在你的当前组件的html 文件中，新建form标签。代码如下所示：
<form [formGroup]="newLocationForm" autocomplete="off"> <p-accordion [multiple]="true"> <p-accordionTab header="基本信息" [selected]="true"> <div class="ui-g"> <div class="ui-g-6 fydd-new-location-input-container"> <span class="ui-float-label"> <input class="fydd-new-location-input" type="text" size="30" pInputText formControlName="locationId"> <label><span class="is-must">*</span>账号</label> </span> </div> <div class="ui-g-6 fydd-new-location-input-container"> <span class="ui-float-label"> <input class="fydd-new-location-input" type="text" size="30" pInputText formControlName="locationName"> <label><span class="is-must">*</span>用户名称</label> </span> </div> <div class="ui-g-6 fydd-new-location-input-container"> <span class="ui-float-label"> <input class="fydd-new-location-input" type="text" size="30" pInputText formControlName="locationName"> <label><span class="is-must">*</span>客户姓名</label> </span> </div> <div class="ui-g-6 fydd-new-location-input-container"> <span class="ui-float-label"> <input class="fydd-new-location-input" type="text" size="30" pInputText formControlName="address"> <label><span class="is-must">*</span>用户地址</label> </span> </div> <div class="ui-g-6 fydd-new-location-input-container"> <span class="ui-float-label"> <input class="fydd-new-location-input" type="text" size="30" pInputText formControlName="locationCross"> <label><span class="is-must">*</span>详细交叉路</label> </span> </div> </div> </p-accordionTab> </p-accordion> </form> 注：
（1）在form表单中，ngModule是无效的，你需要使用formControlName来绑定对应的关键字。
（2）[formGroup]="newLocationForm"，这个是用来初始化你的form表单。其中 newLocationForm 我们需要在对应的ts文件中定义并赋值。详细操作见下面代码：
import {FormBuilder, FormGroup, Validators, FormControl} from '@angular/forms'; export class CreateLocationWindowComponent implements OnInit { newLocationForm: FormGroup; constructor( private fb: FormBuilder) {} ngOnInit() { this.initNewLocationForm(); } initNewLocationForm() { this.newLocationForm = this.fb.group({ locationId: ['', Validators.required], locationName: ['', Validators.required], address: ['', Validators.required], locationCross: [''] }); }
（2）this.initNewLocationForm(); 是我自定义的函数，用来为你的newLocationForm 赋值，也就是初始化form的数据的函数。
（3）HTML中的formControlName必须与newLocationForm 中的值的时候，locationName必须存在。同时，你也可以给它附一个初始值，代码：locationName: ['张三', Validators.required]。
（4）Validators.required。这个意思是必填项。
到此为止，你可以顺利的使用form表单了。
3、番外
（1）为newLocationForm 赋值；setValue()
const toSet: any = { locationId: '00000001', locationName: '张三', address: '巴拉巴拉', locationCross： '网max' } this.newLocationForm.setValue(toSet); 注：在你setValue的时候，不是必须把所有的都得设置一遍，你需要为哪个值赋值就为哪个值赋值。
（2） 动态添加控制键（关键字）。addControl()
for (let i = 1; i <= this.newLocation['物业电话'].length - 1; i++) { const zoneId = this.propertyTelList.length + 1; const property = {propertyNum: zoneId}; this.newLocationForm.addControl('propertyTel' + zoneId, new FormControl(this.newLocation['物业电话'][i], Validators.required)); this.propertyTelList.push(property); } 注：
1）'propertyTel' + zoneId 是新建的控制键的名称。zoneId 是序号（编号），因为控制键的名字不能重复。
2）在这里我用到了了for循环是因为我需要添加多个不定量的控制键，如果你需要，则不需要使用for循环。
this.newLocationForm.removeControl('contactName' + zoneId); （4） 清空newLocationForm的值。reset()
this.newLocationForm.reset(); 注：
（5）获取newLocationForm中的某个值。
const phoneNumber = this.newLocationForm.value['contactTel']; 注：contactTel 是你在newLocationForm中定义的控制键，必须存在。