如何使用Angular FormBuilder

看个具体的例子：

(1) 在app.module.ts里，引入ReactiveFormsModule：

import { ReactiveFormsModule } from ‘@angular/forms’;

以及加到@NgModule的imports区域：

(2) 在需要显示form的Component html上，导入FormBuilder:

import { FormBuilder } from ‘@angular/forms’;

在CartComponent里，新建一个checkoutForm，用于存储formBuilder的group方法返回的form模型：

(3) 在订单提交阶段，用户需要手动输入其名称和地址。

定义一个事件处理函数onSubmit，清除Cart里所有的数据：

下一步就是在Cart Component视图里，绘制form以及内部的元素：

<form [formGroup]="checkoutForm" (ngSubmit)="onSubmit(checkoutForm.value)">
  <div>
    <label for="name">
      Name
    </label>
    <input id="name" type="text" formControlName="name">
  </div>

  <div>
    <label for="address">
      Address
    </label>
    <input id="address" type="text" formControlName="address">
  </div>
  <button class="button" type="submit">Purchase</button>

</form>

最后cart view的效果：

点了Purchase按钮后的输出：

要获取更多Jerry的原创文章，请关注公众号"汪子熙":