Angular Reactive forms Select default object

Question

I'm using reactive forms and I have a select box that comes from an array of objects. I tried to set the default value but it just doesn't set.

My form:

<form [formGroup]="markerForm" (ngSubmit)="onSubmit(markerForm)" novalidate>
      <div class="form-group">
        <label for="markerType">{{ 'MARKER.LABEL_TYPE' | translate }}</label>
        <select  class="form-control" formControlName="markerType"   >
           <option id="markerType" [value]="markerType.id" *ngFor="let markerType of markerTypes">{{markerType.desc}}</option>
        </select>
      </div>
</form>

Set default value:

const test= [{id:1, desc: 'Restaurants'}, {id:2, desc : 'Fire stations'}];
this.markerTypes= test;
console.log(this.markerTypes[1].desc);
this.markerForm.controls['markerType'].setValue( this.markerTypes[1], {onlySelf: true});

Sergey Mell · Accepted Answer · 2019-02-20 15:38:10Z

6

The problem happened because you are using markerType.id as a value but sending the whole object this.markerTypes[1] as default. You should pass this.markerTypes[1].id in this case.

If you want to use objects as values you should use ngValue directive on option tag:

<option id="markerType" [ngValue]="markerType" *ngFor="let markerType of markerTypes">{{markerType.desc}}</option>

This is because unlike the value binding, ngValue supports binding to objects

See the working example here

edited Feb 20, 2019 at 15:38

answered Feb 20, 2019 at 13:03

Sergey Mell

8,0501 gold badge29 silver badges53 bronze badges

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

2 Comments

John Over a year ago

Thank you for your help. Your answer is correct and work, but if i want to pass this.makerTypes[1] it just dont work, check this link please stackblitz.com/edit/…

Sergey Mell Over a year ago

Oh, I got it. Than you should use ngValue instead of value. See, I've updated my answer and stackblitz example

VascoCC · Accepted Answer · 2019-02-20 16:30:17Z

4

You're setting your default value as an Object:

this.markerForm.controls['markerType'].setValue( this.markerTypes[1], {onlySelf: true});

And you're saying that your value is an id:

 <option id="markerType" [value]="markerType.id" *ngFor="let markerType of markerTypes">{{markerType.desc}}</option>

You have multiple choices here, it depends how you want your form value to be.

Using Id:

this.markerForm.controls['markerType'].setValue( this.markerTypes[1].id, {onlySelf: true});

<option id="markerType" [value]="markerType.id" *ngFor="let markerType of markerTypes">{{markerType.desc}}</option>

Using Desc:

this.markerForm.controls['markerType'].setValue( this.markerTypes[1].desc, {onlySelf: true});

<option id="markerType" [value]="markerType.desc" *ngFor="let markerType of markerTypes">{{markerType.desc}}</option>

Using Object:

In this case you have to use [ngValue], [value] is used only for type string variables.

this.markerForm.controls['markerType'].setValue( this.markerTypes[1], {onlySelf: true});

<option id="markerType" [value]="markerType" *ngFor="let markerType of markerTypes">{{markerType.desc}}</option>

Working Example

answered Feb 20, 2019 at 16:30

VascoCC

5006 silver badges17 bronze badges

1 Comment

John Over a year ago

Thank you for your explanation

Sneha Pawar · Accepted Answer · 2019-02-20 12:59:23Z

Try this

check this https://stackblitz.com/edit/angular-rqhchz?embed=1

Component.html

<form [formGroup]="markerForm">
   <select id="country" formControlName="markerType">
       <option *ngFor="let c of markerTypes" [ngValue]="c.id">{{ c.desc }} 
      </option>
   </select>
</form>

component.ts

import { FormControl, FormGroup, Validators } from '@angular/forms';

export class Component {

   markerTypes = [{id:1,desc:'abc'}, {id: 2,desc:'xyz'}];
   default= 1;

   markerForm: FormGroup;

   constructor() {
       this.markerForm= new FormGroup({
           markerType: new FormControl(null)
       });
     this.markerForm.controls['markerType'].setValue(this.default, {onlySelf: true});
    }
}

Hope this will help

Collectives™ on Stack Overflow

Angular Reactive forms Select default object

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related