表單控制項

說明

1. 在tag中用ngModel屬性來建立表單控制項實體
2. 表單控制項中含有該表單欄位的狀態資訊(包含使用者互動與驗證狀態)
3. 可用表單控制項與元件中的model進行單向屬性繫結或雙向繫結
4. 必須在tag中設定name屬性與其值
5. 建立表單控制項有三種方式
   1. 不綁定元件model：<input name="xxx" ngModel>
   2. 單向綁定元件model：<input name="xxx" [ngModel]="元件中model">
   3. 雙向綁定元件model：<input name="xxx" [(ngModel)]="元件中model">
6. 單向綁定元件model時，欄位的值改變時，不會同時改變元件中model的值。元件中model的值改變時，會一併改變欄位的值。
7. 可利用範本參考變數，在標籤中設定#範本參考變數名稱="ngModel"，取得表單控制項實體

template語法：

<input name="xxx" [(ngModel)]="元件model" #範本參考變數名稱="ngModel">

程式碼範例：

1.將template-driven-form.component.html內html改成以下：

<div>
  <p>
    template-driven-form works!
  </p>
  <hr>
  <form>
    <fieldset>
      <div class="form-group">
      <label>title</label>
      <input class="form-control rounded">
    </div>
    </fieldset>
    <fieldset>
      <div class="form-group">
      <label>name</label>
      <input class="form-control rounded">
    </div>
    </fieldset>
  </form>
  <button>送出表單</button>
  <pre>{{data | json}}</pre>
</div>

2.在template-driven-form.component.ts中增加屬性data

export class TemplateDrivenFormComponent implements OnInit {

  data = {
    title: "預設title",
    name: "預設name",
  };

  constructor() { }

  ngOnInit() {
  }

}

3.進入範本表單頁面，下方灰色區域顯示的是元件中data的值

4.將template-driven-form.component.html中title欄位用單向屬性繫結元件的data.title

<input class="form-control rounded" name="title" [ngModel]="data.title">

5.此時元件中data.title會單向繫結帶入title欄位，但是改變欄位輸入文字並不會同時改變元件中的data.title(可參考下方灰色區域)

6.將template-driven-form.component.html中name欄位用雙向繫結元件的data.name

<input class="form-control rounded" name="title" [(ngModel)]="data.name">

7.此時元件中data.title與title欄位進行雙向繫結，改變欄位值的同時會改變元件中的data.name(可參考下方灰色區域)

8.使用範本變數取得name欄位的表單控制項

<input class="form-control rounded" name="name" [(ngModel)]="data.name" #mName="ngModel">

9.在template-driven-form.component.ts中寫方法印出該範本控制項

printNgModel(ngModel) {
    console.log(ngModel);
}

10.在template-driven-form.component.html的送出表單按鈕旁新增按鈕印出model

<button (click)="printNgModel(mName)">印出model</button>

11.打開開發者工具，點擊印出model按鈕，觀察ngModel物件結構