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