добавить динамические группы реактивной формы в угловой 2

Question

У меня есть служба сообщений, которая имеет функцию ответа. Эта функция ответа специфична для группы сообщений, на которые пользователь хочет ответить. Мне нужно динамически добавлять проверку формы в машинописный текст и шаблон с каким-то циклом вокруг конструктора форм внутри конструктора, а затем как передать значение mailData.length обратно в конструктор? Я пробовал угловые учебники и некоторые другие онлайн, но не повезло.

// mail.component.ts 
    constructor(fb: FormBuilder) { 
    this.MailForm = fb.group({ 
     "content": [null, Validators.compose([Validators.required, /*other validation*/])] 
    }); 
    } 
    sendMail(mail:any) { 
    // Send mail 
    } 

затем в mail.html

<div *ngFor="let item of mailData; let i = index"> 
    // display original messages here 

    // reply section 
    <div id="{{i}}"> 
     <form [formGroup]="i.MailForm"> 
      <textarea class="mailContainerTextArea" 
      [formControl]="i.MailForm.controls['content']"> 
      </textarea> 
      <!-- Reply button --> 
      <button class="mailReply" (click)="sendMail(i.MailForm.value)" [disabled]="!MailForm.valid">Send</button> 
     </form> 
    </div> 
</div> 

Answer 1

После долгих поисков и играть вокруг я finllay получил его, учебники онлайн только удовлетворить добавленных элементов на события, как мыши, не образуют группы созданный на основе существующих данных массива. Ответ основан на части из Scotch-io-nestedForms

//component 
    import { FormBuilder, FormGroup, FormArray, Validators } from "@angular/forms"; 
    //other imports FormArray is the important one 

export class SomeComponent{ 
    public MailFormArray:FormGroup; 
    cnstructor(private fb: FormBuilder) { 
     this.MailFormArray = fb.group({ 
      "reply": fb.array([ 
       this.createForms(), 
      ]) 
     }); 
     } 
     // generate the array content 
     createForms() { 
      return this.fb.group({ 
       "content": [null, Validators.compose([Validators.required, Validators.pattern('[a-z]')])] 
      }); 
     } 
     // create dynamic fields by calling this function after json data loaded, and pass in the json data length 
     addForms(jsonLength) { 
      for(let i = 0; i < jsonLength; i++){ 
      const control = <FormArray>this.MailFormArray.controls['reply']; 
      control.push(this.createForms()); 
      } 
     } 
    // replyForm 
    replyForm(theReply) { 
     console.log(JSON.stringify(theReply)); 
    } 
} 

Тогда в шаблоне

<form [formGroup]="MailFormArray"> 
    <div formArrayName="reply"> 
     <div *ngFor="let key of jsonData; let j = index;"> 
      <div [formGroupName]="j"> 
       <div *ngFor="let item of key;"> 
        <textarea maxlength="255" formControlName="content"></textarea> 
        <button (click)="replyForm(MailFormArray.controls.reply.controls[j].value)">Send</button> 
       </div> 
      </div> 
     </div> 
    </div> 
</form>