set option with formgroup in dropdowns option in angular

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
We use cookies in order to give you the best possible experience on our website. By continuing to use this site, you agree to our use of cookies.
Accept
Reject