我收到一个错误:formArrayName 必须与父 formGroup 指令一起使用。您需要添加一个 formGroup 指令并将现有的 FormGroup 实例传递给它
。我不确定我做错了什么。
我希望 FormGroup 迭代几次(使用 ngFor
),并认为使用 formArrayName
将是答案。
HTML:
<div formArrayName = "PaymentArray" *ngFor = "let meshalem of paymentForm.get('PaymentArray').controls;let i =index;">
<div [formGroup]="i">
<div class="row box-border" >
<div class="form-group col-xs-12 col-sm-12 col-md-5 pull-right required">
<label class="control-label">מספר ת.ז. משלם</label>
<input #PidField name="id_pay" id="id_pay" formControlName="id_pay" class="form-control input-lg"
maxlength="9" (input)="searchChange($event.target.value)" />
</div>
</div>
</div>
</div>
.ts File:
paymentForm = this.fb.group({
PaymentArray: this.fb.array([])
})
getPaymentList()
{
this._adminService.getPayment(this.id).subscribe(res => {
if(res.isSuccess)
{
this.PaymentList = res.data ;
this.PaymentList.forEach((pays) => {
this.meshalemArray = this.paymentForm.get('PaymentArray') as FormArray;
this.meshalemArray.push(this.fb.group({
id_pay:[pays.id_pay,Validators.compose([Validators.pattern("^[0-9]*$"), Validators.required])],
numberRooms:[pays.numberRooms],
sum: [pays.sum],
paymentMethod:[pays.paymentMethod],
credit:[pays.credit],
}))
})
}
else
{
//TODO
}
})
}
最佳答案
错误是因为你没有使用 FormArray
里面FormGroup
.只需包装 FormArray
在FormGroup
里面:-
<form [formGroup]="paymentForm">
<div formArrayName = "PaymentArray" *ngFor = "let meshalem of paymentForm.get('PaymentArray').controls;let i =index;">
<div [formGroup]="i">
<div class="row box-border" >
<div class="form-group col-xs-12 col-sm-12 col-md-5 pull-right required">
<label class="control-label">מספר ת.ז. משלם</label>
<input #PidField name="id_pay" id="id_pay" formControlName="id_pay" class="form-control input-lg"
maxlength="9" (input)="searchChange($event.target.value)" />
</div>
</div>
</div>
</div>
</form>
我认为 <div [formGroup]="i">
应该是 <div [formGroupName]="i">
或 <div [formGroup]="meshalem">
关于javascript - formArrayName 必须与父 formGroup 指令一起使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56072420/