我正在尝试为具有嵌套属性(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上不存在。
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>
最佳答案
对Deborahk的答案做了一些更改,因为expense.expense_expense_categories
不包含基元类型,而包含对象。因此,我们无法按原样分配值,但每个对象都需要包装在FormGroup
中,正如您所尝试的那样。
这里我有一个你的代码的简短版本:
建立表单:
ngOnInit() {
this.expenseEditForm = this.fb.group({
notes: [''],
// notice below change, we need to mark it as an formArray
expense_expense_categories_attributes: this.fb.array([])
})
然后我们在回调中调用
patchForm
,就像您一样。这个函数看起来是这样的,注意,我们调用this.setExpenseCategories
外部:patchForm() {
this.expenseEditForm.patchValue({
notes: this.expense.notes,
})
this.setExpenseCategories()
}
然后是现有代码的最大变化,我们首先将
FormArray
赋给变量control
,然后迭代从后端接收的数组,为每个对象创建FormGroup
,并将该对象推送到每个FormGroup
:setExpenseCategories(){
let control = <FormArray>this.expenseEditForm.controls.expense_expense_categories_attributes;
this.expense.expense_expense_categories.forEach(x => {
control.push(this.fb.group(x));
})
}
对于模板,此示例没有角材质:
<form [formGroup]="expenseEditForm">
<label>Notes: </label>
<input formControlName="notes" /><br>
<!-- Declare formArrayName -->
<div formArrayName="expense_expense_categories_attributes">
<!-- iterate formArray -->
<div *ngFor="let d of expenseEditForm.get('expense_expense_categories_attributes').controls; let i=index">
<!-- Use the index for each formGroup inside the formArray -->
<div [formGroupName]="i">
<label>Amount: </label>
<input formControlName="amount" />
</div>
</div>
</div>
</form>
最后一个
Demo
关于angular - Angular 2/4 Edit Form填充FormArray控件,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/43670139/