Angular2で入力フォームを動的に作成する

Question

私は、ユーザーに希望するゲストの数（名前、年齢、年齢）を記入するように促しています。私はまず彼らに何人のゲストを欲しいのか尋ねます。次に、次のページで、そのフォームをユーザーに表示します。このよう

：

<ion-list *ngFor="let item of numberOfGuests"> 
 
    <ion-item> 
 
     <ion-label>Full name</ion-label> 
 
     <ion-input type="text"></ion-input> 
 
    </ion-item> 
 
    <ion-item> 
 
     <ion-label>Age</ion-label> 
 
     <ion-input type="number"></ion-input> 
 
    </ion-item> 
 
    <ion-item> 
 
     <ion-label>Grade</ion-label> 
 
     <ion-input type="number"></ion-input> 
 
    </ion-item> 
 
    </ion-list>

上記は明らかに動作しません。私は例としてそれを使用しています。私は、各リストまたはフォームの入力を、ユーザーがどれくらい多くのゲストに提供したいかに基づいて作成したいと考えています。

これは角2内でも可能ですか？数字に基づいてHTMLでフォームを動的に作成することは可能ですか？

Answer 1

を行きます。

constructor(public navCtrl: NavController, private fb: FormBuilder) { 
    // build form 
    this.myForm = fb.group({ 
    // declare empty form array 
    guests: fb.array([]) 
    }) 
    // here we push form groups to formarray 
    this.addGuests(); 
} 

addGuests() { 
    let formArr = this.myForm.controls.guests as FormArray; 
    // 'amountOfGuests' is the amount of guests you want rendered 
    for(let i = 1; i <= this.amountOfGuests; i++) { 
    formArr.push(this.fb.group({ 
     fullName: [''], 
     age: [''], 
     grade: [''] 
    })) 
    } 
} 

その後、あなたは自分のテンプレート内のフォームの配列（短縮コードを繰り返す：あなたは、テンプレートでレンダリングする必要がありますどのように多くのゲストの価値を持っているとき

は、だから、あなたのフォームの配列には多くのformgroupsがいることをプッシュします）：

<form [formGroup]="myForm"> 
    <ng-container formArrayName="guests"> 
    <ion-list *ngFor="let guest of myForm.controls.guests.controls; let i = index" [formGroupName]="i"> 
     <ion-item> 
     <ion-label>Full name</ion-label> 
     <ion-input formControlName="fullName"></ion-input> 
     </ion-item>  
    </ion-list> 
    </ng-container> 
</form> 

ここDEMOだ:)

Answer 2

ダイナミックフィールドを作成する必要がある場合は、次の操作を行います。

これを行うには、フォームコントローラを配列として作成します。

this.myForm = this._fb.group({ 
       name: ['', [Validators.required, Validators.minLength(5)]], 
       addresses: this._fb.array([ 
        this.initAddress(), 
       ]) 
      }); 

initAddress() { 
     return this._fb.group({ 
      street: ['', Validators.required], 
      postcode: [''] 
     }); 
    } 

    addAddress() { 
     const control = <FormArray>this.myForm.controls['addresses']; 
     control.push(this.initAddress()); 
    } 

    removeAddress(i: number) { 
     const control = <FormArray>this.myForm.controls['addresses']; 
     control.removeAt(i); 
    } 

ここで、addressesは動的フィールドです。

次に、このようなHTMLコードを作成します。複数の基準については

<div formArrayName="addresses"> 
      <div *ngFor="let address of myForm.controls.addresses.controls; let i=index" class="panel panel-default"> 
      <div class="panel-heading"> 
       <span>Address {{i + 1}}</span> 
       <span class="glyphicon glyphicon-remove pull-right" *ngIf="myForm.controls.addresses.controls.length > 1" (click)="removeAddress(i)"></span> 
      </div> 
      <div class="panel-body" [formGroupName]="i"> 
       <address [group]="myForm.controls.addresses.controls[i]"></address> 
      </div> 
      </div> 
     </div> 

は、私がAjmalによって提案されただけのように、反応性形となるだろう例https://embed.plnkr.co/LHWlcdC06xisANRZ0NeV/このplunkerを通じて