Управление значением Reactive Form и значением является объектом

Question

У меня есть массив, который я получаю с сервера, который содержит такие объекты:

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

]

Я обрабатываю это, создавая массив массива.

MyПроблема: я хочу, чтобы, если пользователь изменил этот ввод, он изменил только свойство 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
            }
        )
    })
}

Простоне включает ввод formControlName = "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.