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

Javascript 表单数组中表单控件的验证无效,javascript,angular,typescript,forms,Javascript,Angular,Typescript,Forms,我有表单数组,其中有表单控件 下面是HTML代码 <div class="container"> <ng-container formArrayName="positions"> <div class="row" style="margin-top:20px;"

我有表单数组,其中有表单控件

下面是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>
但是当我试图运行project时,我得到了这个错误

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

在此行
*ngIf=“form.get('name').toucted | | form.get('name').dirty”


如何解决这个问题?

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

<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>

{{'FieldIsRequired'|本地化}

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

<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>

{{'FieldIsRequired'|本地化}