Binding select tag data to reactive form in Angular

Question

I've a JSON formatted data coming from back-end, with gender as a select tag in front-end I'm unable to pre-select the option that comes with json data. Also from back-end it comes in enum format and I need it to parse accordingly 1 for Male and 2 for Female here is the format of my back-end data,

{
  "salesPersonId": 13,
  "name": "testName",
  "gender": 1,
  "phone1": "34986215",
  "phone2": "string",
  "email": "[email protected]",
  "team": "Bravo",
  "teamLeader": "Delta",
  "countyId": 1,
  "county": null,
  "subCountyId": 1,
  "subCounty": null,
  "address": "House 108",
  "additionalInfo": "He Drinks tea",
  "input1": "string",
  "input2": "string"
}

and here's what I'm trying to get it bind with my received data,

 <mat-form-field appearance="outline" fxFlex="33" class="pr-4">
    <mat-label>Gender</mat-label>
    <mat-select formControlName="gender">
        <mat-option value="1">1</mat-option>
        <mat-option value="2">2</mat-option>

    </mat-select>
</mat-form-field>

neither it produces any error nor do it pre-select the gender tag that comes from back-end. Note: I'm using reactive forms Thanks in advance.

Please add your form configuration

Cristiano Casciotti
– Cristiano Casciotti

2019-11-18 08:18:02 +00:00
Commented Nov 18, 2019 at 8:18 — Cristiano Casciotti
– Cristiano Casciotti, Commented Nov 18, 2019 at 8:18

Ling Vu · Accepted Answer · 2019-11-18 08:40:43Z

3

You can use setValue method in Angular Forms as follows.

I will assume that you are using FormGroup. In HTML value should be used as a property binding as follows.

<form [formGroup]="myGroup">
  <mat-form-field>
  <mat-label>Gender</mat-label>
  <mat-select formControlName="gender">
    <mat-option [value]="1">Male</mat-option>
    <mat-option [value]="2">Female</mat-option>
  </mat-select>
</mat-form-field>
</form>

Change your TS as follows.

  user = { "name": "testName", "gender": 1 };

  ngOnInit() {
    this.myGroup.controls['gender'].setValue(this.user.gender);
  }

StackBlitz Demo.

edited Nov 18, 2019 at 8:40

Ling Vu

5,1896 gold badges28 silver badges49 bronze badges

answered Nov 18, 2019 at 8:31

Sudarshana Dayananda

5,2652 gold badges27 silver badges45 bronze badges

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

Collectives™ on Stack Overflow

Binding select tag data to reactive form in Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related