Angular 带formarray的验证反应表单

我用的是angular 2。我需要确认表，反应表和表格

这是我的表格

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>

这是我的表格

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>

项目数量
项目数无效

但是我收到了这个错误信息

错误类型错误：无法读取未定义的属性“valid”

---

如何解决此问题？

如下图所示更改代码

项目数无效

项目中的

中的
是什么。控件[在]
中？此模板抛出错误
无法找到路径为“ITEMS->NO\u OF\u ITEMS”的控件
请发布正确的代码谢谢你的回复。我更新了我的代码。请检查它。使用FormArray时，你应该使用索引访问控件。看看它应该是什么样子。此答案也可能有助于你以正确的方式使用FormArray@yurzui。非常感谢你。这是一项工作。你可以通过编辑它并添加关于你的建议如何工作的解释来改进你的答案-它如何解决问题中所述的问题。