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