使用 formarray 验证反应式表单答案

【问题标题】：Validation reactive form with formarray使用 formarray 验证反应式表单
【发布时间】：2017-10-21 04:46:37
【问题描述】：

我正在使用 Angular 2。我需要使用 formArray 验证表单反应形式。

这是我的表格。

this.addbookingForm = this.fb.group({
      FROM: ['', Validators.required],
      ITEMS: this.fb.array([this.initItems()]),

})

 initItems() {        
    const group = this.fb.group({           
          NAME: [''],
          NO_OF_ITEMS: ['',Validators.required],
          PRICE: [''],
          WEIGHT: [''],
          TOTAL: ['']                     
    });
    return group;
}

这是我的表格。

<form [formGroup]="addbookingForm" role="form" (ngSubmit)="onSubmit(addbookingForm.value)"  novalidate>

    <div formArrayName="ITEMS" class="form-group row">
         <div class="form-group col-sm-2">
                <label class="form-label">No of Items</label>
                <input type="text" pattern="^[0-9]*$" class="form-control" tabindex="7" formControlName="NO_OF_ITEMS" (change)="onChange(ITEMS.controls.value.NO_OF_ITEMS)">
                <p class="err" danger padding-left *ngIf="(!addbookingForm.controls.ITEMS.controls.NO_OF_ITEMS.valid)">Invalid number of items</p>
        </div>
    </div> 
</form>

但我收到此错误消息

ERROR TypeError: Cannot read property 'valid' of undefined

我该如何解决这个问题？

【问题讨论】：

ITEMS.controls[in] 中的in 是什么？此模板抛出错误Cannot find control with path: 'ITEMS -> NO_OF_ITEMS' Please post correct code
感谢您的回复。我更新了我的代码。Kinldy 检查一下。
使用 FormArray 时，您应该使用索引来访问控件。
看看应该如何stackblitz.com/edit/…这个答案也可以帮助您以正确的方式使用FormArraystackoverflow.com/questions/42783400/…
@yurzui。非常感谢。它的工作。

标签： angular

【解决方案1】：

如下更改您的代码

<p class="err" danger padding-left 
    *ngIf="(!addbookingForm.controls.ITEMS.controls[0].controls.NO_OF_ITEMS.valid)">
Invalid number of items</p>

【讨论】：

您可以通过编辑它并添加关于您的建议如何工作的解释来改进您的答案 - 它如何解决问题中所述的问题。