我正在尝试为具有嵌套属性(FormArray)的模型实现编辑表单。我在语法上遇到了问题,并且不确定我是否走在正确的轨道上。主表单的属性有效,这是我遇到问题的嵌套表单。这是我到目前为止所拥有的。
这里我发起表单组:
private initForm() {
this.subscription = this.expenseService.getExpense(this.id)
.subscribe(
expense => {
this.expense = expense;
this.patchForm();
}
);
this.expenseEditForm = this.fb.group({
date: '',
amount: '',
check_number: '',
debit: '',
payee_id: '',
notes: '',
expense_expense_categories_attributes:[]
});
}
在这里,我修补了表单以设置从后端 API 检索到的对象的值。
private patchForm() {
this.expenseEditForm.setValue({
date: '',
amount: this.expense.amount_cents,
check_number: this.expense.check_number,
debit: this.expense.debit,
payee_id: '',
notes: this.expense.notes,
expense_expense_categories_attributes: this.fb.array([
this.setExpenseCategories(),
])
});
}
这就是我被困住的地方。如何推送到 FormArray。如果我尝试推送,我会收到一条错误,指出推送在 FormArray 上不存在。
private setExpenseCategories() {
for ( let expenseCategories of this.expense.expense_expense_categories){
this.fb.array.push([
this.fb.group({
expense_category_id: [expenseCategories.expense_category_id, Validators.required],
amount: [expenseCategories.amount_cents]
])
});
}
}
以防万一需要的话。这是我的 html。
<div
*ngFor="let expensecategoriesCtl of expenseEditForm.controls.expense_expense_categories_attributes.controls let i = index"
[formGroupName]="i"
style="margin-top: 10px;">
<md-card>
<md-select class="full-width-input"
placeholder="Expense Category"
id="expense_category_id"
formControlName="expense_category_id"
>
<md-option *ngFor="let expenseCategory of expenseCategories" value="{{expenseCategory.id}}">
{{expenseCategory.category}}
</md-option>
</md-select>
<md-input-container class="full-width-input">
<input
mdInput placeholder="Amount"
type="number"
formControlName="amount">
</md-input-container>
</md-card>
</div>