Mandy's Web

文章導覽

  • 表單宣告

  • 另一種宣告方式

  • 取得表單裡的資料

  • 取得特定資料


Angular Reactive Form 響應式表單 (formControl)

昨天我們看了 一長串的表單使用範例 都是經過理解消化後所寫出來的 code ,那麼今天就來聊一聊消化的過程吧!

表單宣告

一開始 建立一個新的 form 表單,它會是一組的 group

export class FormComponent implements OnInit {
  form!: FormGroup;
}

form 後面加上! 是 Typescript 2.0 的 non-null 可參考 非空斷言運算子( ! ) > Non-null assertion operator

一開始 form 裡 沒有給他任何的屬性與值,所以初始化時可使用 FormBuilder 來生成一個表單,在 formBuilder.group 裡會自動產生一個 FormControl 讓預設的值塞入,預設為空值

this.form = this.formBuilder.group({
  name: "",
  phone: "",
});

對應到 html 上的

<form [formGroup]="form">
  <div>
    <label for="">name:</label>
    <input formControlName="name" type="text" />
  </div>
  <div>
    <label for="">phone:</label>
    <input formControlName="phone" type="tel" />
  </div>
</form>

注意:form 表單裡的 FormControl 必須與 template 裡的 formControlName 互相對應,不然會報錯

如圖: 這是 form 裡沒有命名為 phone 的 FormControl,所以出現了以下錯誤,這時後會覺得 Angular 非常的貼心 XD


另一種宣告方式

因為我已經知道我的 form 表單裡會需要有哪些內容 所以我在一開始的時後就直接將 form 裡所需操控的部份設定好

export class FormComponent implements OnInit {
  form: FormGroup = new FormGroup({
    name: new FormControl(),
    phone: new FormControl(),
  });
}

預設為空值,若需要帶預設值的時後會在 ngOnInit 裡讀到值後再將值變更塞入

ngOnInit(): void {
   this.form.setValue({
    name: 'Mandy',
    phone: '0912345678',
  });
}

取得表單裡的資料

.ts

this.form.value;

取得特定資料

.ts

// 取得 name 的值
this.form.get("name").value;

參考資料:


明天就來說說 formArray 的部份


對這篇文章有什麼想法嗎?

Copyright © 2022 Mandy. All rights reserved. Build with Angular