角度2の動的反応性フォームグループを追加

Question

私は返信機能を持つメッセージサービスを持っています。この返信機能は、ユーザーが返信したいメッセージのグループに固有です。私は動的にtypescriptとテンプレートでフォーム検証を追加する必要があります。コンストラクタ内でフォームビルダの周りに何らかのループがあると、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>