CODEWITHSUNDEEP
angulartypescript
tlt
tlt

Reputation: 15211

Getting selected option from object bound list in angular

The catch is that we don't want to use 2 way binding. we have component set like this:

<select type="text" formControlName="region" (change)="regionChanged($event)">
              <option *ngFor="let region of regionsDDL" [ngValue]="region">{{region.name}}</option>
            </select>

form is build as reactive one using form builder:

this.fb.group({
.
region:...
.
});

What i want to get in event handler is the whole object bound to selected option. Is it safe just to access form group value like this:

regionChanged($event) {
    let selectedRegion = this.basicInfoForm.controls["region"].value;
      }

or is it not guaranteed that form control value update happens before (change) event occurs?

Upvotes: 0

Views: 196

Answers (1)

Aravind
Aravind

Reputation: 41553

Assign a ngModel to it and use ngModelChange() event 

<select type="text" formControlName="region" [ngModel]="someValue" (ngModelChange)="regionChanged($event)">
              <option *ngFor="let region of regionsDDL" [ngValue]="region">{{region.name}}</option>
            </select>

Upvotes: 2

Related Questions