管理反应式表单值，该值是一个对象

Question

我有一个从服务器获得的数组，其中包含如下对象：

[
{LanguageName: 'English', ID : 2},
{LanguageName: 'Dutch', ID : 1},
{LanguageName: 'portuguese', ID: 3},
]

我通过创建一个表单数组来处理这个问题。

我的问题： 我希望如果用户更改此输入，它将仅更改 Name 的属性，例如：anyFormName.controls.value.LanguageName，而不是将整个值完全替换为字符串，因此最终不会得到：

anyFormName.controls.value = "User's Input"

，我会得到：

anyFormName.controls.value = {LanguageName: "User's Input", ID : 2}

我之前已经使用特定控件的setValue((解决了这个问题，并将数据保存在另一个数组中，以便我可以通过表单Array的索引比较位置。 在我看来，可能有更好的方法...

多谢！

Answer 1

Tal，一般来说你会得到一个像 formArray

<div *ngIf="myFormArray" [formGroup]="myFormArray">
<div *ngFor="let item of myFormArray.controls; let i=index" [formGroupName]="i">
<input formControlName="ID">
<input formControlName="LanguageName">
</div>
</div>
{{myFormArray?.value|json}}

//或

<div *ngIf="myForm" [formGroup]="myForm">
<div formArrayName="data">
<div *ngFor="let item of myForm.get('data').controls; let i=index" [formGroupName]="i">
<input formControlName="ID">
<input formControlName="LanguageName">
</div>
</div>
</div>
{{myForm?.value|json}}

你在哪里有一些喜欢

myForm:FormGroup
myFormArray:FormArray;
values=[
{LanguageName: 'English', ID : 2},
{LanguageName: 'Dutch', ID : 1},
{LanguageName: 'portuguese', ID: 3},
]
ngOnInit() {
this.myForm=this.fb.group({
data:this.fb.array(this.createFormArray(this.values))
})
this.myFormArray=this.fb.array(this.createFormArray(this.values));
}
createFormArray(values:any):FormGroup[]
{
return values.map(x=>{
return this.fb.group(
{
LanguageName:x.LanguageName,
ID:x.ID
}
)
})
}

只是不包括输入表单控件名称="ID">

Answer 2

只要我正确理解您，您就会尝试更改表单控件名称而不是其值。这可以通过此方法完成：

changeFormFieldName(oldField: string, newField: string): void {
var newControls: {[key: string]: FormControl} = {};
Object.keys(this.form.controls).map((field: string) => {
if (field==oldField) {
newControls[newField] = this.form.controls[field];
} else {
newControls[field] = this.form.controls[field];
}
});
this.form = new FormGroup(newControls);
}

假设表单组对象位于this.form下。