Tengo el siguiente formulario con un FormArray que contiene FormGroups

 <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>

los valores de URL provienen de una matriz que se completa a través de API en la devolución de llamada. Establecí los valores:

 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); } }

la matriz inicial está vacía

 private createForm() { this.appSiteForm = this.fb.group({ title: ['', Validators.required] }); this.screenForm = this.fb.group({ iPhoneScreenshots: this.fb.array([]), });

}

esta línea de código me parece muy extraña

 img src="{{app.screenshotUrls[i]}}"

Estoy haciendo esto porque url.value() o url.get('value') genera errores.

Entonces, ¿cómo puedo acceder al valor de un control de formulario?