如何在 Angular 4 中动态创建 formControlName?
How to create formControlName dynamically in Angular 4?
我想动态创建 formControlName,这是我在组件中的代码,
CONTROLER CODE
ngOnInit() {
this.rForm = this.fb.group({
question_type_id: this.fb.array([]),
});
for (let i = 0; i < this.getQuestionsType.length; i++) {
const control = <FormArray>this.rForm.controls['question_type_id'];
control.push(this.initAddress(i));
}
}
initAddress(i) {
var ans = "is_answer_"+i;
return this.fb.group({
ans: ['']
});
}
所以我想要formControlName这样,
is_answer_0
is_answer_1
is_answer_2
在 es6 中可以使用 computed keys 创建对象。所以让我们使用它:
initAddress(i) {
var ans = "is_answer_" + i;
return this.fb.group({
[ans]: ['']
^^^^^
});
}
你应该知道,如果 typescript 的目标是 es5 那么它将被压缩成类似这样的东西:
var controlConfig = {};
controlConfig[ans] = [''];
所以这是你的第二个选择
试试下面的代码。它当然有效!
ngOnInit() {
for(var i = 0; i < this.getQuestionsType.length; i++) {
<FormArray>this.rForm.get('question_type_id').push(new FormControl("is_answer_"+i));
}
}
我想动态创建 formControlName,这是我在组件中的代码,
CONTROLER CODE
ngOnInit() {
this.rForm = this.fb.group({
question_type_id: this.fb.array([]),
});
for (let i = 0; i < this.getQuestionsType.length; i++) {
const control = <FormArray>this.rForm.controls['question_type_id'];
control.push(this.initAddress(i));
}
}
initAddress(i) {
var ans = "is_answer_"+i;
return this.fb.group({
ans: ['']
});
}
所以我想要formControlName这样,
is_answer_0
is_answer_1
is_answer_2
在 es6 中可以使用 computed keys 创建对象。所以让我们使用它:
initAddress(i) {
var ans = "is_answer_" + i;
return this.fb.group({
[ans]: ['']
^^^^^
});
}
你应该知道,如果 typescript 的目标是 es5 那么它将被压缩成类似这样的东西:
var controlConfig = {};
controlConfig[ans] = [''];
所以这是你的第二个选择
试试下面的代码。它当然有效!
ngOnInit() {
for(var i = 0; i < this.getQuestionsType.length; i++) {
<FormArray>this.rForm.get('question_type_id').push(new FormControl("is_answer_"+i));
}
}