看個具體的例子：

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

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

以及加到@NgModule的imports區(qū)域：

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

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

在CartComponent里，新建一個 checkoutForm 屬性，用于存儲formBuilder的group方法返回的form模型：

(3) 在訂單提交階段，用戶需要手動輸入其名稱和地址。

定義一個事件處理函數 onSubmit，清除Cart里所有的數據：

下一步就是在Cart Component視圖里，繪制form以及內部的元素：

formGroup 綁定的 checkoutForm 就是之前用 formBuilder 新建的 Component 里的屬性。

<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的原創(chuàng)文章，請關注公眾號"汪子熙":

總結

以上是生活随笔為你收集整理的如何使用Angular FormBuilder的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。