私は Angular2 リアクティブ フォーム (履歴書フォーム) を使用しています。フォームにはいくつかのフィールドがあり、次にqualifications
配列を渡す必要があるコンポーネントがあります (ループを使用してユーザーの資格を表示できるようにするため)。
これは、データをコンポーネントに渡す方法ですqualifications
<ion-list-header> Qualification & Education </ion-list-header>
<div formArrayName="qualifications">
<div *ngFor="let qualification of profileForm.controls.qualifications.controls; let i=index"
class="panel panel-default">
<qualifications [group]="profileForm.controls.qualifications.controls[i]"></qualifications>
</div>
</div>
これはqualifications
コンポーネントのhtmlです
<div [formGroup]="qualificationForm">
<ion-item padding>
<ion-label stacked>Qualification</ion-label>
<ion-input type="text" formControlName="position"></ion-input>
<small [hidden]="qualificationForm.controls.position.valid" class="text-danger">
Qualification is required
</small>
</ion-item>
<ion-item padding>
<ion-label stacked>Institution</ion-label>
<ion-input type="text" formControlName="location"></ion-input>
</ion-item>
<ion-item padding>
<ion-label stacked>Date</ion-label>
<ion-input type="date" formControlName="at_date"></ion-input>
</ion-item>
</div>
これは、修飾配列がどのように見えるかです
0:{id: 1744687, location: "Singapore", position: "B Tech", at_date: "09/2014"}
1:{id: 1762435, location: "Singapore", position: "B Tech 2", at_date: "11/2014"}
2:{id: 1802837, location: "Singapore", position: "B Tech 3", at_date: "12/2016"}
オブジェクトの配列をこのコンポーネントに渡して、条件をループで表示できるようにする方法を理解できません
ngOnInit
私は次のような関数を呼び出していaddQualification
ます
addQualification() {
const control = <FormArray>this.profileForm.controls['qualifications'];
const addrCtrl = this.initAddress();
control.push(addrCtrl);
}
initAddress() {
return this.formBuilder.group({
position: ['', Validators.required],
location: [''],
at_date: ['']
});
}
私が抱えている問題は、フォームが配列の最初のオブジェクトのみを表示し、ループしていないことです