当FormControlName是动态的并且可以更改时，如何初始化FormGroup

Question

我是angular的新手，我正面临这种情况。

在我的HTML页面中，有一个表单(formgroup(，在里面我有一个带有ngFor指令的div，可以在需要的任何时间循环通过一个对象。

假设我有一个formControlName的输入字段，如下所示：

<input type="text" formControlName="name{{i}}" >

如何在typescript文件中创建FormGroup对象？？？

在正常情况下，当controlName不是动态的时，我曾经做过这样的事情：

this.namedForm = new FormGroup({
'name': new formControl(),
});

它工作正常，

但是当我将索引添加到formControlName时，我将如何创建formGroup对象？

我试过这样的东西，但它显示错误。。。

let nameControl = 'name'+i;
this.namedForm = new FormGroup({
nameControl : new formControl(),
});

有什么帮助吗？

Answer 1

您需要像一样动态添加控制

this.namedForm.addControl(this.name, new FormControl(''));

请参见此示例：https://angular-ivy-9rbeic.stackblitz.io

Answer 2

好吧，使用ngFor循环的对象将在某个时刻以某种方式初始化/更改。(例如，如果你的对象是一个输入，因为它似乎是你想要做的，你可以在ngOnChanges钩子中检测它的变化。(

然后，每次初始化或更改对象时，只需要再次初始化FormGroup，并根据对象的新值构建正确的TControl集合。例如：

myNgForObjectForHasBeenChanged(objectUpdated:any){
let controls:TControl = {};

for(let objectIndex in objectUpdated){
//Or use 'name'+index or whatever, instead of objectIndex
//what is important is that your "controls" collection needs unique indexes
controls[objectIndex] = new FormControl();
}

this.namedForm = new FormGroup(controls);
}

Answer 3

您可以使用FormArray来处理表单中的数组值。

new FormGroup({
textContainer: new FormArray([
new FormControl('')
])
});

模板可以是这样的：

<ul formArrayName="textContainer">
<li *ngFor="let item of form.controls.textContainer.controls; let i = index">
<input type="text" formControlName="{{i}}">
</li>
</ul>

另请参阅：https://angular.io/api/forms/FormArrayName