我正在使用 Angular 2 构建一个表单生成器。表单字段在某个数据存储中定义，并在运行时由我的 Angular 2 模板呈现为表单。我正在尝试为动态表单设置表单绑定(bind)，但到目前为止尚未成功。
我采取的第一种方法如下。如果当前表单元素(“element”)的类型为 TEXT_INPUT，则有条件地呈现输入元素。在支持组件中定义了一个模型类(“model”)，我希望将输入表单元素绑定(bind)到模型。{{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 完全陌生，所以我希望我忽略了一些明显的东西。
谢谢。
最佳答案
您可以使用方括号表示法引用对象，如下所示:
<input *ngIf="element.type == 'TEXT_INPUT'" type="text"
[(ngModel)]="model[element.systemName]" />
关于Angular 2 - 如何绑定(bind)到 "dynamic"表单字段，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39931987/