如何在 ng-template 中使用反应式表单

我刚刚开始使用 Angular 4，我需要开发一个 CRUD 网格，用户可以在其中添加、编辑或删除行。

在我的研究过程中，我发现这篇文章展示了如何创建网格以及操作：具有 CRUD 操作的 Angular 4 Grid http://www.dotnetcurry.com/angularjs/1380/angular-4-grid-crud.

看看他的代码，引起我注意的是他使用 ng-template 在编辑/查看模式之间切换的方式。

<tr *ngFor="let emp of EMPLOYEES;let i=idx">
 <ng-template [ngTemplateOutlet]="loadTemplate(emp)" [ngOutletContext]="{ $implicit: emp, idx: i }"></ng-template>
</tr>

在文章中，他使用模板驱动的表单来编辑行。然而，我试图改变为反应形式。

在尝试执行此操作时，我尝试将 [(ngModel)] 替换为 formControlName，但出现了一些错误。我的第一次尝试是在表单元素内的模板 html 的开头添加 [formGroup]。但是当我尝试运行并编辑该行时，出现以下错误：

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

当我尝试将 [formGroup] 移动到 ng-template 内时，它可以工作，但是我无法将值绑定到字段，我必须在 loadTemplate 函数中设置值：

loadTemplate(emp: Employee) {
    if (this.selemp && this.selemp.id === emp.id) {

        this.rForm.setValue({
            id: emp.id,
            name: emp.name
        });

        return this.editTemplate;
    } else {
        return this.readOnlyTemplate;
    }
}

这可以工作并以只读模式显示字段内的值:(

这里是Plunker https://plnkr.co/edit/KC8n3FN02KIhvblWztxP?p=preview到目前为止我所得到的。

如何使反应式表单与 ng-template 一起使用以及如何设置值来编辑条目？

任何帮助表示赞赏！谢谢

实际上您的表单不是只读的，您只是不断地覆盖您输入的输入。由于您在模板中进行了方法调用（这通常不是一个好主意），loadTemplate每当发生变化时就会被调用，这反过来意味着

this.rForm.setValue({
   id: emp.id,
   name: emp.name
});

每当您尝试输入任何内容时，都会被一遍又一遍地调用。我们可以通过在单击编辑时设置表单值来克服这个问题。这里我们还存储索引，以便我们可以使用它在数组中的正确位置设置修改后的值，利用索引也许可以以更智能的方式完成，但这是实现我们想要的快速解决方案。

editEmployee(emp: Employee) {
    this.index = this.EMPLOYEES.indexOf(emp) 
    this.selemp = emp;
    this.rForm.setValue({
      id: emp.id,
      name: emp.name
    });
}

所以当我们点击保存时，我们使用该索引......

saveEmp(formValues) {
  this.EMPLOYEES[this.index] = formValues;
  this.selemp = null;
    this.rForm.setValue({
      id: '',
      name: ''
    });

}

你的笨蛋：https://plnkr.co/edit/6QyPmqsbUd6gzi2RhgPp?p=preview https://plnkr.co/edit/6QyPmqsbUd6gzi2RhgPp?p=preview

但请注意...

我建议你也许重新考虑这个想法，有方法loadTemplate在模板中，将导致此方法触发过多。你可以在plunker中看到，我们控制台日志fired!每当它被发射时，所以它很多！根据具体情况，这可能会导致严重的性能问题，因此请记住这一点:)

附言。对代码进行了一些其他更改，以添加新员工以正常工作（与问题无关）