FormGroups を含む FormArray を持つ次のようなフォームがあります。
<form [formGroup]="screenForm" novalidate>
<div formArrayName="iPhoneScreenshots" class="row">
<div *ngIf="screenForm.controls.iPhoneScreenshots?.length > 0">
{{screenForm.controls.iPhoneScreenshots?.length }}
<div *ngFor="let url of screenForm.controls.iPhoneScreenshots.controls; let i=index">
<div [formGroupName]="i">
<input class="form-control" formControlName="url">
<img src="{{app.screenshotUrls[i]}}" class="rounded img-fluid app-screen" style="height:200px"/>
</div>
</div>
</div>
</div>
</form>
url の値は API 経由で入力される配列から取得します。 コールバックで値を設定します:
private setScreenShots(app: ItunesApp): void {
if (app.hasOwnProperty('screenshotUrls')) {
const screenShots = app.screenshotUrls.map(url => {
return this.fb.group({
url: [url, Validators.required]
});
}
);
const screenShotsArray = this.fb.array(screenShots);
this.screenForm.setControl('iPhoneScreenshots', screenShotsArray);
}
}
初期配列は空です
private createForm() {
this.appSiteForm = this.fb.group({
title: ['', Validators.required]
});
this.screenForm = this.fb.group({
iPhoneScreenshots: this.fb.array([]),
});
}
このコード行は、私には非常に奇妙に見えます。
img src="{{app.screenshotUrls[i]}}"
url.value()やurl.get('value')でエラーが発生するので、このようにしています。
では、どうすればフォームコントロールの値にアクセスできるのでしょうか?
urlグループから制御を試みることができる
<div *ngFor="let urlGroup of screenForm.controls.iPhoneScreenshots.controls; let i=index">
<div [formGroupName]="i">
<input class="form-control" formControlName="url">
<img [src]="urlGroup.get('url').value" />
</div>
</div>
プランカーの例]1