How to get the value of a FormControl in angular2

Question

I have the following form with an FormArray containing 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>

the url values come from an array which is getting populated via API in the callback I set the values:

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

initial array is empty

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

this.screenForm = this.fb.group({
  iPhoneScreenshots: this.fb.array([]),
});

}

this code line looks very strange to me

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

I am doing this since url.value() or url.get('value') raises errors.

So how can I access the value of a form control?

yurzui · Accepted Answer · 2017-04-21 16:17:45Z

17

You can try to get control from url group

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

Plunker Example

answered Apr 21, 2017 at 16:17

yurzui

215k32 gold badges450 silver badges413 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

dc10 Over a year ago

This is it. Works perfect. Can you point me to the docs since I have not seen this in the examples given on angular.io

Moshe · Accepted Answer · 2023-04-10 20:30:32Z

7

Try this:

screenForm.get('url').value

edited Apr 10, 2023 at 20:30

answered Apr 21, 2017 at 15:05

Moshe

2,6744 gold badges30 silver badges72 bronze badges

1 Comment

dc10 Over a year ago

Cannot read property 'value' of null I also updated the createForm method and you'll see that there is just another form built.

Collectives™ on Stack Overflow

How to get the value of a FormControl in angular2

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related