Используйте динамическую c реактивную форму (поля в то время как)

Question

Я пытаюсь использовать реактивную форму с angular для построения формы со всеми необходимыми полями.

На самом деле у меня есть этот код и результат https://stackblitz.com/edit/angular-mciraa

В первом разделе вы можете увидеть 5 доступных полей.

Но вы можете увидеть мою проблему на этой картинке

I ' Не кроме этого результата, но этот:

Заглавный блок 1 = Поля этого блока (поля 1, 2, 3) Заглавный блок 2 = Поля этого блока (поля 4, 5, а не поля 1,2 )

Можете ли вы мне помочь, пожалуйста?

Спасибо за вашу помощь.

Answer 1

HTML

<form [formGroup]="routerForm" class="LG_global-form" *ngIf="routerForm">
    <div class="LG_global-container" *ngFor="let bloc of sendRouterInfo; let i=index" [formGroupName]="i">
      <div class="LG_global-wrap">
        <h2 class="LG_global-title">{{bloc['title']}}</h2>
        <p class="LG_intro">
          {{bloc['comment']}}
        </p>
        <div class="LG_form-line" *ngFor="let field of bloc['fields']; let i = index"  [formGroupName]="i">
          <div>Array index: {{i}}</div>
          <input formControlName="name" type="text"  />
      </div>
    </div>
  </div>
</form>

TS

this.dataFromAPi.block.forEach((bloc, index) => {
        const formArray = new FormArray([]);

        bloc.fields.forEach(field => {
          field.value = '';
          formArray.push(
              this.formBuilder.group({
                'name': [field ? field.name : ''],
                'value': [field ? field.value: '', Validators.compose([Validators.required])]
              })
          );
        });
        this.routerForm.controls[index] = formArray;
      });

Answer 2

Спасибо, вы отлично работаете, но теперь у меня есть странный одобрение. Моя проблема - действительное свойство формы группы. это свойство остается в силе, даже если массив формы недействителен, как это возможно?

Еще раз спасибо за вашу помощь