注：下面我說的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: ['']
    });
  }
 

注： 

（1）CreateLocationWindowComponent  是我的當前元件（頁面）的名稱，這個會在你建立當前元件的時候自動生成。

（2）this.initNewLocationForm(); 是我自定義的函式，用來為你的newLocationForm 賦值，也就是初始化form的資料的函式。

（3）HTML中的formControlName必須與newLocationForm 定義的關鍵字相對應。比如說： formControlName="locationName"，那麼在初始化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迴圈。

（3）動態移除控制鍵。 removeControl()

this.newLocationForm.removeControl('contactName' + zoneId);

（4） 清空newLocationForm的值。reset()

this.newLocationForm.reset();

注：當你使用該函式的時候，只是會將你賦給控制鍵的值清空，不能使你動態新增或刪除的的控制鍵恢復 。

（5）獲取newLocationForm中的某個值。

const phoneNumber = this.newLocationForm.value['contactTel'];

注：contactTel 是你在newLocationForm中定義的控制鍵，必須存在。