FormBuilder官网个人学习笔记

steps

1. import { FormBuilder } from '@angular/forms';
2. FormBuilder传入constructor实例化
3. 设置 from 初始字段

// cart.component.ts
export class CartComponent {
  items = this.cartService.getItems();

  checkoutForm = this.formBuilder.group({
    name: "",
    address: "",
  });

  constructor(
    private cartService: CartService,
    private formBuilder: FormBuilder
  ) {}
}

4. <form>
   其中通过 formControlName 属性对下面 <input> 进行字段绑定.

// cart.component.html
<form [formGroup]="checkoutForm" (ngSubmit)="onSubmit()">
  <button class="button" type="submit">Purchase</button>
</form>

5. 提交表单数据
   this.checkoutForm.value取出表单数据
   this.checkoutForm.reset()清空表单