Цикл массива формы внутри группы форм угловой

Question

Я получаю список данных с сервера и хочу показать их внутри списка диапазонов , как показано ниже:

Каждая строка соответствует одному элементу списка и обратите внимание, что я создаю этот список с *ngFor, как показано ниже:

this.myForm = this.fb.group({
            person: this.fb.array([
                this.fb.group({
                    name: [''],
                    address: ['']
                })
            ])
        })

<form [formGroup]="myForm">
      <div formArrayName="person" *ngFor="let person of serverData; let personIndex = index">
          <div [formGroupName]="personIndex">
              <input formControlName="name"/>
              <input formControlName="address"/>
          </div>
      </div>
</form>

После запуска этого кода браузер выдает мне следующее:

Ошибка:

Нет доступа к значению для управления формой с путем: 'person -> 0 -> name'

Но я знаю, что яследует использовать myForm.controls.person.controls вместо serverData в цикле for, но я хочу иметь оба список и элементы управления вместе.

Должен ли я использовать два для циклов, которыеодин из них перебирает данные сервера, а другой перебирает элементы управления формой, или я должен использовать другой способ?

Answer 1

Вы должны передать все объекты из serverData в ваш формат, чтобы длины массива были такими же, как у массива serverData. Ваш шаблон остается таким, какой он есть в данный момент, но в компоненте сопоставьте значения с serverData и поместите объекты со свойствами, которые вы хотите, в формат:

constructor(private fb: FormBuilder) {}

ngOnInit() {
  this.myForm = this.fb.group({
    persons: this.fb.array([])
  });
  this.data();
}

get person() {
  return this.myForm.get("persons") as FormArray;
}

private data() {
  this.serverData = [
    {
      name: "1",
      desc: "one"
    },
    {
      name: "2",
      desc: "two"
    },
    {
      name: "3",
      desc: "three"
    }
  ];

  this.serverData.map(d =>
    this.person.push(this.fb.group({ name: d.name, address: d.desc }))
  );
}

DEMO: STACKBLITZ

Answer 2

ПРИМЕЧАНИЕ: мне нравится, что цикл - это div ofGroupName

<form [formGroup]="myForm">
      <div formArrayName="person"> >
          <div *ngFor="let person of serverData; let personIndex = index"
               [formGroupName]="personIndex">
              <span formControlName="name">{{person.name}}</span>
              <span formControlName="address">{{person.address}}</span>
          </div>
      </div>
</form>

Если вы выполняете итерацию по myForm.controls.person.controls, всегда значение formGroupName имеет, если у вас есть массив, и вы объявляете ДО созданияформа, при самом первом состоянии приложения FormArray не создается