表单数组中表单控件的验证无效

Question

我有表单数组，其中我有表单控件。

这是HTML代码

<div class="container">
<ng-container formArrayName="positions">
<div class="row" style="margin-top:20px;"
*ngFor="let _ of positions.controls; index as i">
<ng-container [formGroupName]="i">
<div class="col-sm flex-3">
<input class="form-control" trim-directive formControlName="name"
maxlength="64" />
<div class="has-danger"
*ngIf="form.get('name').touched || form.get('name').dirty">
<div *ngIf="form.get('name').errors?.required"
class="form-control-feedback">
{{'FieldIsRequired' | localize}}
</div>
</div>
</div>
</ng-container>
</div>
</ng-container>
</div>

以下是我如何在TS文件中创建它

createForm(): any {
this.form = this._formBuilder.group({
positions: this._formBuilder.array(
[
this._formBuilder.group({
recruitmentAgencyClientId: [this.recruitmentAgencyClientId],
loanAmount: ['', [Validators.required, Validators.min(2000)]],
name: ['', [Validators.required]]
})
], Validators.required)
});
this.getPositionsCount();
this.getTotalLoanAmount();
}

但当我尝试运行项目<我收到这个错误

TypeError:无法读取空的属性"已触摸">

此行*ngIf="form.get('name').touched || form.get('name').dirty"

我该怎么解决这个问题？

Answer 1

form是外部形式组。您必须这样做才能访问内部表单组。

<div class="container">
<ng-container formArrayName="positions">
<div class="row" style="margin-top:20px;"
*ngFor="let innerForm of positions.controls; index as i">
<ng-container [formGroupName]="i">
<div class="col-sm flex-3">
<input class="form-control" trim-directive formControlName="name"
maxlength="64" />
<div class="has-danger"
*ngIf="innerForm.get('name').touched || innerForm.get('name').dirty">
<div *ngIf="innerForm.get('name').errors?.required"
class="form-control-feedback">
{{'FieldIsRequired' | localize}}
</div>
</div>
</div>
</ng-container>
</div>
</ng-container>
</div>