Question

我想使用FormBuilder为包含数组的对象创建一个for验证器...并且该数组中的每个项目也包含一个数组。

基本视图布局就像这样

Category 1
     Item 1.1
     Item 2.2 
     ...
Category 2 
     Item 2.1
     Item 2.2
....

我正在后面创建表单..首先在类别列表中创建：

this.complexForm = formBuilder.group({
  'category': formBuilder.array([])
});

类别基本上是名称（类别1）和项目列表

{name: 'Category1',items:formBuilder.array([])}

在添加功能中，我将项目推送到类别。

    category.items.push(this.formBuilder.group({description:'Item 1.1'}));

在视图方面，我有我的问题。有人可以告诉我如何绑定输入并设置第二个ngFor循环，以便它绑定到组件中的表单？我似乎无法破译如何将两个列表分开，因为它们是嵌套的。

<table class="table category-table" *ngFor="let category of complexForm.controls.category.controls;let i=index;">
  <thead>
  <tr>
	<th class="category-header"><input type="text" class="form-control" value="CATEGORY 1" ></th>
  </tr>
  </thead>
  <tbody>
	<tr *ngFor="EACH ITEM IN CATEGORY1 ITEMS list">
		<td><input type="text" class="form-control" value="item.description(ITEM 1.1)"></td>
	  </tr>
	  <tr>
		<td colspan="2">
		  <button class="btn btn-link" (click)="addCheckListItem()"><i class="fa fa-plus"></i> Add check-list item</button>
		</td>
	  </tr>
  </tbody>
</table>

Angular5嵌套数组表单验证FormBuilder

0 个答案: