gpt4 book ai didi

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

转载 作者:太空狗 更新时间:2023-10-29 17:39:15 29 4
gpt4 key购买 nike

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

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

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

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

在文章中,他使用模板驱动的表单来编辑行。但是,我正在尝试更改为 react 形式。

在尝试这样做时,我尝试将 [(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).

当我尝试在 ng-template 中移动 [formGroup] 时它起作用了,但是我无法将值绑定(bind)到字段,我必须在 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到目前为止我所得到的。

如何使用 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: ''
});

}

你的 plunker:https://plnkr.co/edit/6QyPmqsbUd6gzi2RhgPp?p=preview

但是注意...

我建议您重新考虑这个想法,在模板中使用方法 loadTemplate 会导致此方法触发太多。您可以在 plunker 中看到,每当它被触发时,我们都会在其中控制台记录 fired!,所以它很多!根据具体情况,这可能会导致严重的性能问题,因此请记住这一点 :)

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

关于javascript - 如何在 ng-template 中使用响应式表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45742591/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com