其實應該要在出現 Angular Material 篇章前才對，不過我漏掉了==

Form 表單 簡介

Angular當中有兩種表單管理方式：

本文僅先介紹　Reactive forms。

Reactive forms

建立 From

慣例的 imort module

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
 imports: [
   BrowserModule, 
   ReactiveFormsModule,
 ],
})

可以用各種結構來建立表單：

1. 使用最小單位類別 FormControl

   <!--XXX.component.html-->
   <input type="text" [formControl]="firstName">
   

   // XXX.component.ts
   firstName = new FormControl("");
   

2. 使用類別 FormGroup
FormGroup 什麼都可以包進去： FormControl FormGroup FormArray

   <!--XXX.component.html-->
   <form [formGroup]="_Form">
     <input type="text" formControlName="firstName">
   </form>
   

   // XXX.component.ts
   _Form: FormGroup = new FormGroup({
     firstName: new FormControl(''),
     emails: new FormArray([
       new FormControl(''),
       new FormControl('')
     ]),
   });
   

3. 透過 FormBuilder 元件

   constructor(
     private _FormBuilder: FormBuilder
   ) {}
   _Form!: FormGroup;
   
   this._Form = this._FormBuilder.group({
     firstName: [''],
     emails: this._FormBuilder.array([
       this._FormBuilder.control(''),
       this._FormBuilder.control('')
     ]),
   });
   

   • 取值

     this._Form.get('firstName')?.value;
   

   • 設定值

     this._Form.get('firstName')?.setValue('Cindy'); //會檢查 interface 
     this._Form.get('firstName')?.patchValue('Cindy');
   

重設

  this._Form.reset();

到時候連假再回來補充 Validation 驗證條件

參考來源

Angular-表單(Form)-ReativeForm簡介
Angular 筆記 - form 表單基礎實作
【Ionic】Reactive Form 表單學習筆記