Set Option With Formgroup In Dropdowns Option In Angular

Contents hide

1 set option with formgroup in dropdowns option in angular

Problem Description:

I have setup this formgroup

 holidayform: FormGroup;

 this.holidayform = this.fb.group({
      title: ['', [Validators.required]],
      entryDate: ['',],
    })

 this.holidayform.patchValue({
      title: data.title,
      entryDate: data.entryDate,
 })

this is my dropdown in my component :

<form [formGroup]="holidayform">
 <select class="form-control"> <option value="Globals" [selected]="holidayform.title=='Globals'">Global</option>
 <option value="Locals" [selected]="holidayform.title=='Locals'">Local</option>
 </select>

[selected]="holidayform.title=='Globals'" this is not working i want to select it based on the value i patched in the formgroup.

Any solution Thanks

Solution – 1

The selection is defined by the bound FormControl. Tell Angular, that the select is bound to the title control within holidayform by using formControlName. Now, if data.title is Globals when you patch it, Global option gets selected.

<form [formGroup]="holidayform">
  <select class="form-control" formControlName="title">
    <option value="Globals">Global</option>
    <option value="Locals">Local</option>
  </select>

Rate this post