Question

我正在使用Angular 2构建表单生成器。表单字段在某个数据存储区中定义，并在运行时由我的Angular 2模板呈现为表单。我正在尝试为动态表单设置表单绑定，但到目前为止还没有成功。

我采取的第一种方法如下。如果当前表单元素（'element'）属于TEXT_INPUT类型，则有条件地呈现输入元素。在支持组件中定义了一个模型类（'model'），我希望输入表单元素绑定到model。{{element.systemName}}。

<input *ngIf="element.type == 'TEXT_INPUT'" type="text"
[(ngModel)]="model.{{element.systemName}}" 
class="field-long" placeholder="{{element.label}}" 
name="{{element.systemName}}" />

这种方法不起作用。不允许{{}}作为ngModel的值。

我的第二种方法也没有用，因为“这个”不存在。

<input (keyup)="updateModel(this)" (blur)="updateModel(this)"
*ngIf="element.type == 'TEXT_INPUT'" type="text" 
class="field-long" placeholder="{{element.label}}" 
name="{{element.systemName}}"/>

有什么方法可以引用当前的表单元素并将其发送到后端组件，如updateModel（ref.to.current.form.element）？

似乎在元素上放置 #myElementName 会创建一个引用，这将允许我调用updateModel（myElementName）。但是我又遇到了一个问题，我需要一个像＃{{element.systemName}}这样的动态名称。

我对Angular 2完全不熟悉，所以我希望我能忽略一些明显的东西。

感谢。

Answer 1

有一个关于这个的官方文档页面：

Dynamic Forms

在其中，他们建立了一份调查问卷/调查表，其中问题列表及其类型（文本，选择，广播等）是存储在动态对象中（以模拟来自数据库）。

这个想法是：

ngFor了解问题列表
每个问题都是相同的组件
问题组件具有ang ngSwitch，用于选择要使用的表单控件

请参阅live example and source code。

Answer 2

您可以使用方括号表示法引用对象，如下所示：

<input *ngIf="element.type == 'TEXT_INPUT'" type="text"
[(ngModel)]="model[element.systemName]" />

Angular 2 - 如何绑定到“动态”表单字段

2 个答案: