angular2でFormControlの値を取得する方法

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')でエラーが発生するので、このようにしています。

では、どうすればフォームコントロールの値にアクセスできるのでしょうか？

dc10
編集された質問 21日 4月 2017 в 4:03
プログラミング
angular angular2-forms
21日 4月 2017 в 1:07
まだビューはありません
ソリューション

urlグループから制御を試みることができる

<div *ngFor="let urlGroup of screenForm.controls.iPhoneScreenshots.controls; let i=index">
    <div [formGroupName]="i">
        <input class="form-control" formControlName="url">

    </div>
</div>

プランカーの例]1

解説 (1)

これを試してみてほしい：

screenForm.get('url').value

これでうまくいかない場合は、フォームビルダー全体を拝見させていただきます。

解説 (1)