Angular 2 создает динамический formcontrol, который содержит formarray

Question

У меня есть форма реактивного ввода с динамическим количеством входов, к которым мне нужно добавить элементы управления формы.

Родительский элемент управления Mammals будет содержать переменное количество MammalId и каждыйMammalId будет содержать FormArray переменной длины.

Я создал машинописный код, который будет генерировать форму, как я описал, однако мне не удалось установить мою форму в HTML.

И пример моей сгенерированной формы:

Я попытался отобразить форму в моем html следующим образом:

<form [formGroup]="inputForm">
  <div *ngFor="let mammal of Mammals; let i = index">
    <div *ngFor="let id of mammal.ids; let z = index">
      <!-- parent form control -->
      <div [formGroupName]="mammals">
        <!-- mammals[i].id resolves to 'mammalIdx' -->
        <div [formGroupName]="mammals[i].id">
          <!-- this should map as the controls Form Array -->
          <input [formControlName]="z">
        </div>
      </div>
    </div>
  </div>
</form>

Но когда я пытаюсь запустить это, я получаю:

Ошибка: не удается найти элемент управления с неопределенным атрибутом имени

Как мне установить свой html на свойЗначения формы?

Спасибо

Answer 1

Млекопитающие родительского элемента управления будут содержать переменное количество MammalId, и каждый MammalId будет содержать FormArray переменной длины.

В соответствии с моим пониманием, вы ожидаете, что массив может быть таким

  [  
   {  
      "Mammals":[  
         {  
            "mammalId":[  
               {  

               }
            ]
         }
      ]
   }
]

для указанного выше массива форма будет выглядеть следующим образом

    this.inputForm = this.fb.group({
   Mammals: this.fb.array([}
   mammalId: this.fb.array([{
      z: ''
      }
   ])}
  ])
})

для этого указанного массива html должен выглядеть следующим образом

HTML

<form [formGroup]="inputForm">
<div formArrayName="Mammals">
  <div *ngFor="let mammal of inputForm.get('Mammals'); let i = index" [formGroupName]="i">
  <div formArrayName="mammalId">
    <div *ngFor="let id of mammal.get(mammalId); let z = index" [formGroupName]="z">
      <!-- parent form control -->

        <!-- mammals[i].id resolves to 'mammalIdx' -->

          <!-- this should map as the controls Form Array -->
          <input [formControlName]="z">
        </div>
      </div>
    </div>
    </div>
  </div>
  </div>
</form>

Может быть, вам поможет