Заполнение реактивной формы Angular данными с сервера

Question

Попытка вставить данные сервера в форму Angular так, чтобы ключ свойства FormGroup был ключом из данных сервера. Следил за документами Angular по формам Dynami c, но это было не совсем то, что я хотел (https://angular.io/guide/reactive-forms#creating -dynami c -forms ).

Дело в том, , чтобы заполнить форму данными и отобразить ее в шаблоне с *ngFor, используя ползунки на каждом свойстве, чтобы получить значение. Затем отправляем данные обратно на сервер.

Пример объекта данных:

{
  "things": [
    {
      "thingId": 1,
      "thingName": "bear"
    },
    {
      "thingId": 2,
      "thingName": "piano"
    }
  ]
}

Служба получения данных и присвоения переменной:

things: IThing[] = [];

getThings() {
  this.thingService.getThings()
    .subscribe(data => {
      this.things = data.things;
    });
}

Мне нужно заполнить things FormGroup (или FormArray, если необходимо) со значениями из объекта данных, полученного с сервера, то есть thingName значение свойства => "медведь", "фортепиано".

ngOnInit() {
  this.myForm = this.fb.group({
    title: ['', []],
    comment: ['', []],

    // need to populate the things object here, example:
    things: this.fb.group([
      // bear: [,[]],
      // piano: [,[]]
      // and so on...
    ])
  })

  this.getThings();
}

Answer 1

Вы можете создать empy FormGroup и использовать addControl , чтобы добавить элемент управления с именем свойства

things: this.fb.group({}) //<--a empty formGroup

И в подписке вещей

this.thingService.getThings()
    .subscribe(data => {
      this.things = data.things;
      this.things.forEach(x=>{
          (this.myForm.get('things') as FormGroup)
                 .addControl(x.thingName,this.fb.control(''))
      })
    });

ПРИМЕЧАНИЕ: в. html у вас есть что-то вроде

<form [formGroup]="myForm">
  ...
  <div formGroupName="things">
      <div *ngFor="let thing of things">
          <input [formControlName]="thing.thingName">
      </div>
  </div>
</form>

Update Другое дело, что вы действительно хотите иметь FormArray, вам нужно подумать о вашей базе данных (если вы хотите хранить в базе данных). В этом случае вам нужен только FormArray из FormControls, поэтому сначала вы создаете пустой FormArray

things: this.fb.array([]) //<--a empty formArray

И в подписке вы добавляете в свой formArray столько элементов управления, сколько элементы имеют вещи

this.thingService.getThings()
    .subscribe(data => {
      this.things = data.things;
      this.things.forEach(x=>{
          (this.myForm.get('things') as FormArray)
                 .push(this.fb.control(''))
      })
    });

И. html как

<form [formGroup]="myForm">
  ...
  <div formArrayName="things">
      <div *ngFor="let controls of thingsArray.controls;let i=index">
          {{things[i].thingName}}:<input [formControlName]="i">
      </div>
  </div>
</form>

Используйте геттер для получения массива

get thingsArray()
  {
    return this.myForm.get('things') as FormArray
  }

Я помещаю оба случая в stackblitz -в stackblitz у вас есть myForm и myForm2-