窗体数组中窗体控件不工作的验证

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();
}

但是，当我尝试运行project<时，我会得到这个错误

TypeError:无法读取属性“触摸”的null

在这一行*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>