Pre select an option in select tag having ngValue in angular reactive form

Question

Hello everyone I'm new to angular so I'm having a hard time with some very common things in angular. I'm using a reactive form where I'm using some select tags everything is going smooth except when I'm trying to pre-select an option from a select tag with the data coming from the rest call, the select tag is not setting up. To make everything clear I'm using the formGroup patchValue to fill all the controls with values.

this.contactForm.patchValue(this.contractOwner);

bellow how my select tag looks like

<select formControlName="contractCategory" class="form-control">
    <option [ngValue]="null" selected>Please choose</option>
    <option *ngFor="let category of contactCategoryList" [ngValue]="category">
      {{ category.description }}
    </option>
</select>

below is the selected value object from the rest call is coming

contractCategory: {id: 2, code: "C2", description: "Category 2", organizationId: 0, isActive: 1,…}

Most likely a duplicate of https://stackoverflow.com/questions/61466116/setting-selected-item-of-a-select-element-using-async-pipes-in-angular. `select` needs a `compareWith` to compare category based on id. — Simon, Mar 22 '22 at 15:00

unsignedmind · Answer 1 · 2020-11-11T13:34:01.837

-1

This should do the trick. Add the value that should be preselected in the new FromControl(). I hope I got you right. If not please provide your typescript file.

this.panelForm = new FormGroup({
  contractCategory: new FormControl(this.contactCategoryList[0]),
});

Form Group Angular Docs Link

edited Nov 11 '20 at 13:34

answered Nov 11 '20 at 13:28

unsignedmind

182
1
12

Pre select an option in select tag having ngValue in angular reactive form

1 Answers1