Question

我有一个循环遍历表单控件值数组的表。

<tbody>
  <tr *ngFor="let t of intakeForm.get('tasks').value let i = index; trackBy:trackByIndex" [taskTR]="t" [ui]="uiOptions" [intakeForm]="intakeForm"></tr>
</tbody>

在我的TR组件中，HTML是所有TD数据，非常标准的内容。

但是，我在其中一个TD中输入了我需要分配formControlName的内容。

当我尝试这样做时，它告诉我它需要在我完全理解的formGroup范围内。

但是，如果我尝试用formGroup div包装所有TD，它会使表HTML无效。

TR组件HTML：

<td>{{ row.User.FirstName }} {{ row.User.LastName }}</td>
<td>{{ row.Tool.ToolName }}</td>
<td class="col-md-9">
    <ng-select  [items]="ui.adminRoles.options" 
                bindLabel="RoleName" 
                bindValue="Role"
                placeholder="Select one or more roles" 
                [multiple]="true"
                [clearable]="false" 
                (add)="addRole($event, row)" 
                formControlName="someField"
                (remove)="removeRole($event, row)">
    </ng-select>
</td>

以上导致错误：

ERROR Error: formControlName must be used with a parent formGroup directive.  You'll want to add a formGroup
       directive and pass it an existing FormGroup instance (you can create one in your class).

如何在保持HTML有效的同时为此添加表单组？即，表格行内的div不是有效的语法。

Answer 1

要在模板中使用FormGroup - 元素，您应该设置FormGroup - 指令。最简单的方法是使用form包裹表格 - 标记并添加FromGroup - 指向此form - 标记。像这样：

<form [formGroup]="yourFormGroup">
  <tbody>
    <tr *ngFor="let t of intakeForm.get('tasks').value let i = index; trackBy:trackByIndex" [taskTR]="t" [ui]="uiOptions" [intakeForm]="intakeForm">    </tr>
  </tbody>
</form>

Angular如何将表单组添加到TR组件？

1 个答案: