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

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-Elements，您应该设置FormGroup-Directive。最简单的方法是使用form-Tag包装表，并将FromGroup-Directive添加到此form-Tag。像这样：

<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>