如何在ng-template中使用反应形式 [英] How to use reactive forms inside ng-template

问题描述

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

I have just started with Angular 4 and I need to develop a CRUD grid, where the user can add, edit or delete rows.

在研究过程中，我发现这篇文章展示了如何创建网格以及操作:具有CRUD操作的Angular 4网格.

During my research I found this article where it shows how to create the grid and also the actions: Angular 4 Grid with CRUD operations.

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

Looking at his code, what called my attention was the way he is using the ng-template to toggle between edit/view mode.

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

在文章中，他使用模板驱动的表单来编辑行.但是，我试图更改为反应形式.

On the article he uses template driven forms to edit the row. However, I was trying to change to reactive forms.

在尝试这样做时，我尝试将[[ngModel)]替换为formControlName，但出现了一些错误.我的第一次尝试是尝试在form元素内的模板html的开头添加[formGroup].但是，当我尝试运行和编辑行时，出现以下错误:

In my attempt to do that, I tried to replace the [(ngModel)] to formControlName and I got some errors. My first attempt I tried to add the [formGroup] at the beginning of the template html inside form element. But when I tried to run and edit the row, I got the following 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).

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

When I tried to move the [formGroup] inside the ng-template it works, however I was not able to bind the value to the fields and I had to set the values in the loadTemplate function:

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

这有效，并以只读模式显示字段内的值:(

This works and show the values inside the fields in a read only mode :(

以下是我到目前为止所获得的内容柱塞.

Here is the Plunker of what I have got so far.

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

How can I make a reactive form work with ng-template and how to set values to edit the entries?

感谢您的帮助！谢谢

推荐答案

实际上，您的表单不是只读的，您只是不断地覆盖正在输入的输入.由于您正在模板中进行方法调用(通常不是一个好主意)，因此只要发生更改，就会调用loadTemplate，这又意味着

Actually your form is not readonly, you are just constantly overwriting the input you are entering. Since you are having a method call in template (which is usually not a good idea), loadTemplate gets called whenever changes happen, which in it's turn means that

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

每次尝试键入任何内容时，

都会被一遍又一遍地调用.我们可以通过单击编辑来设置表单值来克服这一问题.在这里，我们还存储了索引，以便我们可以使用它来将修改后的值设置在数组中的正确位置，利用索引可能可以以更聪明的方式完成，但这是实现我们想要的快速解决方案.

gets called over and over whenever you try and type anything. We can overcome this with instead setting the form values when you click to edit. Here we also store the index so that we can use it to set the modified values in the correct place in array, utilizing the index could perhaps be done in a smarter way, but this is a quick solution to achieve what we want.

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

因此，当我们单击保存"时，我们将使用该索引...

so when we click save, we use that index...

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

}

您的朋克: https://plnkr.co/edit/6QyPmqsbUd6gzi2RhgPp?p=预览

我建议您也许重新考虑一下这个想法，在模板中使用方法loadTemplate会导致此方法触发过多.您可以在监听器中看到，只要它被触发，我们便在其中控制台日志fired!，所以很多！根据情况，这可能会导致严重的性能问题，因此请记住:)

I would suggest you perhaps rethink this idea, having the method loadTemplate in template, will cause this method to fire way too much. You can see in the plunker, where we console log fired! whenever it is fired, so it is a lot! Depending on the case, this can cause serious performance issues, so keep that in mind :)

PS.对代码进行了一些其他更改，以添加新员工以使其正常工作(与问题无关)

PS. Made some other changes to code for adding a new employee to work properly (not relevant to question)

这篇关于如何在ng-template中使用反应形式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！