iT邦幫忙

2021 iThome 鐵人賽

DAY 3
1
Modern Web

Angular 常見問題大小事系列 第 3

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 的部份


上一篇
Angular Reactive Form 表單
下一篇
Angular Reactive Form 響應式表單 (formArray)
系列文
Angular 常見問題大小事31

1 則留言

0
Tim Hsu
iT邦新手 4 級 ‧ 2021-09-14 09:55:53

之前一直被 formArray 所苦,期待下一篇

Mandy iT邦新手 4 級 ‧ 2021-09-14 14:17:29 檢舉

沒問題 有看不懂的地方請再跟我說 XD

我要留言

立即登入留言