我尝试迭代表单控件，但遇到一些问题。我使用 Angular2 中的 FormBuilder。
我的 Controller 中有以下代码:
ngOnInit() {
let data = this.dataSet[this.key];
this.form = this._fb.group({});
Object.keys(data).forEach(name => {
this.form.addControl(name, new FormControl());
this.form.controls[name].setValue(data[name]);
});
console.log(this.form);
}
这会在控制台上提供以下输出:
FormGroup
...
controls: Object
database1: FormControl
...
_value: Object
accessHost: "some host here"
accessKey: "the key here"
....
database2: FormControl
...
_value: Object
accessHost: "some host here"
accessKey: "the key here"
到目前为止看起来还不错。 html代码:
<form [formGroup]="form" (ngSubmit)="onSave(form)">
<div *ngFor="let ups of form.controls | keyVal; let i=index">
{{ups.key}}
<div class="form-group">
<input class="form-control" formControlName="{{ups.key}}">
</div>
</div>
</form>
但这部分不起作用:
<input class="form-control" formControlName="{{ups.key}}">
当我检查 {{ups.key}} 的值时，它是“database1”。在这种情况下，“database1”不是 FormControlName 吗？
感谢您的帮助
最佳答案
您需要将 formControlName 属性绑定(bind)到表达式:
<input class="form-control" [formControlName]="ups.key" />
注意属性周围的 []。 一个好的开始是看一下这本食谱:Dynamic Form正如@kcp建议的
关于javascript - 如何在 Angular2 中迭代表单生成器？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41998331/