建立表單模型

說明

1. 表單模型在元件中建立
2. 使用FormBuilder服務元件建立表單模型
3. 使用FormBuilder物件的group()方法，傳回FormGroup物件
4. 使用FormBuilder物件的array()方法，傳回FormArray物件
5. 使用FormBuilder物件的group()或array()方法，需傳入物件作為參數
   • 物件屬性的值如果是字串，則會產生FormControl物件的子控制項，並且以該字串為欄位預設值
   • 物件屬性的值如果是陣列，陣列的第一個元素是字串，代表此FormControl物件的子控制項的欄位預設值。陣列的第二個元素是自訂驗證的服務元件，有多個驗證元件時須包在陣列中
   • 物件屬性的值也可以是FormGroup物件或FormArray物件
6. 可使用FormGroup的get("子控制項名稱")方法，取得子控制項的FormControl實體

程式碼範例：

1.將```model-driven-form.component.html'''內的html改為以下內容，並檢查頁面

<div>
  <p>
    model-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>
    <button type="submit">送出表單</button>
  </form>
</div>

2.在model-driven-form.component.ts'''元件內宣告表單模型form```，並注入FormBuilder元件

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from "@angular/forms";

@Component({
  selector: 'app-model-driven-form',
  templateUrl: './model-driven-form.component.html',
  styleUrls: ['./model-driven-form.component.css']
})
export class ModelDrivenFormComponent implements OnInit {
  form: FormGroup;
  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
  }

}

3.在上層的app.module.ts中宣告為FormBuilder服務元件的Provider，並且importReactiveFormsModule

@NgModule({
  ...
  imports: [
    ...
    ReactiveFormsModule,
    ...
  ],
  providers: [TestService, RouteGuard, FormBuilder],
  ...
})

3.在model-driven-form.component.ts元件的建構式中，使用formBiulder建立FormGroup物件，物件的兩個屬性用陣列建立FormControl物件

export class ModelDrivenFormComponent implements OnInit {
  form: FormGroup;
  constructor(private formBuilder: FormBuilder) {
    this.form = this.formBuilder.group({
      title: ["預設title"],
      name: ["預設name"],
    })
  }

  ngOnInit() {
  }

}

4.在model-driven-form.component.html中，將元件中的this.form物件使用[formGroup]掛在<form>tag上

<form [formGroup]="form">

5.在model-driven-form.component.html中，將元件中的this.form物件的"title"的FormControl物件，使用formControlName掛在title欄位，觀察頁面title欄位

<fieldset>
    <div class="form-group">
      <label>title</label>
      <input class="form-control rounded" name="title" formControlName="title">
    </div>
</fieldset>

6.在model-driven-form.component.html中，將元件中的this.form物件的"name"的FormControl物件，使用formControlName掛在name欄位，觀察頁面name欄位

<fieldset>
    <div class="form-group">
      <label>name</label>
      <input class="form-control rounded" name="name" formControlName="name">
    </div>
</fieldset>

7.在model-driven-form.component.ts中寫printForm方法用來觀察this.Form物件

printForm(){
  console.log(this.form);
}

8.在model-driven-form.component.html中，加入觸發前述方法的按鈕

<button (click)="printForm()">印出form</button>

9.開啟開發者工具，點擊印出form按鈕可看到this.form物件結構，其中的controls屬性，包含了這個FormGroup中所有的FormControl物件(欄位)的狀態資料

10.在model-driven-form.component.ts中寫printTitle方法用來觀察this.Form中title欄位的FormControl物件

printTitle(){
    console.log(this.form.get("title"))
  }

11.在model-driven-form.component.html中，加入觸發前述方法的按鈕

<button (click)="printTitle()">印出title</button>

12.開啟開發者工具，點擊印出title按鈕可看到this.form中title欄位的FormControl實體