Angular Reactive Form 表单

表单

表单在实作上是件常见的的处理，为什麽会写这篇呢？实在是因为我太容易忘了 XD
还记得一开始接触到表单操控时， Angular reactive form 的官方文件它虽然写的很清楚，但对於当时刚趟入 Angular 领域的我 还是看的一头雾水，尤其是在 formArray 的应用上，那麽，就趁着这次机会记录下来吧！

实作

app.module.ts

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    FormsModule,
    ReactiveFormsModule,
    ...
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

务必在 app.module.ts 里加上 FormsModule 与 ReactiveFormsModule，否则会报错。

.ts

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

  get favorites() {
    return this.form.get("favorites") as FormArray;
  }

  // 新增
  addField(e?: MouseEvent, value?: any) {
    if (e) {
      e.preventDefault();
    }

    const id =
      this.favorites.controls.length > 0
        ? this.favorites.value[this.favorites.value.length - 1].id + 1
        : 0;

    this.favorites.push(
      new FormGroup({
        id: new FormControl(id),
        favorite: new FormControl(),
      })
    );
  }

  // 移除
  removeField(index: number, e?: MouseEvent): void {
    if (e) {
      e.preventDefault();
    }
    if (this.favorites.value.length > 1) {
      this.favorites.removeAt(index);
    }
  }

  onSubmit(): void {
    console.log("onSubmit", this.form.value);
  }
}

.html

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <div>
    <label for="">name：</label>
    <input formControlName="name" type="text" />
  </div>
  <div>
    <label for="">phone：</label>
    <input formControlName="phone" type="tel" />
  </div>
  <div
    formArrayName="favorites"
    *ngFor="let fav of favorites.controls; let idx = index"
  >
    <div [formGroupName]="idx">
      <ng-container *ngIf="idx === 0">
        <label for="">favorites：</label>
        <button (click)="addField($event)">新增</button>
        <br />
      </ng-container>
      <input formControlName="favorite" type="text" [value]="" />
      <button (click)="removeField(idx, $event)">移除</button>
    </div>
  </div>
  <button type="submit">Submit</button>
</form>

关於 reactive form 里的一些架构

官方文件的解释：
FormGroup 用於追踪一个表单控制元件组的值和状态。
FormControl 实例用於追踪单个表单控制元件的值和验证状态。
FormArray 用於追踪表单控制元件阵列的值和状态。

我的理解：
FormGroup 将需要被赋值与操控的表单群组起来 = 物件
FormControl 主要是查看 value 与 验证的状态 = 物件里的值
FormArray 表单里的阵列
使用阵列时，需要再包一层 FormGroup 才能使用 FormControl 新增

若需要赋予一组值时，需要先新增 FormControl 去做对应，否则会报错

文件：https://angular.tw/guide/forms-overview#setting-up-the-form-model
API：https://angular.tw/api/forms

今天先来个实际范例，明天来说说 formControl 这部份
接下来几天会介绍 reactive form