Angular 4 - Select default value in dropdown Reactive Forms

Question

In Angular 4  I have the following configuration defined in a json config file    countries    USA    UK    Canada     default   UK    I need to display these in a dropdown using Reactive module   Here is the code to do this  ts   countries  string         default  string      this countries   config countries  this default   config default    html   lt select id  country  formControlName  country    gt    lt option  ngFor  let c of countries   value   c   gt    c    lt  option gt   lt  select gt     This does the job and displays the countries in a drop down  However  I also need to select a country by default and the default country comes from the  default  key defined in json   So  I tried doing something like this       c      However  this does not work  By default an empty value if selected   How can I make sure that a predefined value is selected by default

User · Answer

You can use the patch function for setting defaults with some of the values in your form group.

component.html

<form [formGroup]="countryForm">
    <select id="country" formControlName="country">
        <option *ngFor="let c of countries" [ngValue]="c">{{ c }}</option>
    </select>
</form>

component.ts

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

export class Component implements OnInit{

    countries: string[] = ['USA', 'UK', 'Canada'];
    default: string = 'UK';

    countryForm: FormGroup;

    constructor() {

        this.countryForm.controls['country'].setValue(this.default, {onlySelf: true});
    }
}

ngOnInit() {
    this.countryForm = new FormGroup({
      'country': new FormControl(null)
    }); 

    this.countryForm.patchValue({
      'country': default
    });

  }

User · Answer

You have to create a new property  ex selectedCountry   and should use it in   ngModel   and further in component file assign default value to it   In your component file ts  this selectedCountry   default    In your component template html   lt select id  country  formControlName  country    ngModel    selectedCountry  gt    lt option  ngFor  let c of countries   value   c   gt    c    lt  option gt   lt  select gt     Plunker link

User · Answer

I was struggling and Found this Easy and Effective way from IntelliJ IDEA suggestion   lt select id  country  formControlName  country    gt     lt option  defaultSelected  true  value   default   gt   default   lt  option gt     lt option  ngFor  let c of countries   value   c   gt    c    lt  option gt   lt  select gt     And On your ts file assign the values   countries     USA    UK    Canada     default    UK    Just make sure your formControlName accepts string  because you already assigned it as a string

User · Answer

In your component -   Make sure to initialize the formControl name country with a value    For instance  Assuming that your form group name is myForm and  fb is FormBuilder instance then        this myForm   this  fb group     country  this default       and also try replacing  value  with  ngValue     EDIT 1  If you are unable to initialize the value when declaring then set the value when you have the value like this   this myForm controls country controls setValue this country

User · Answer

In Reactive forms  Binding can be done in the component file and usage of ngValue  For more details please go through the following link  https   angular io api forms SelectControlValueAccessor  import  Component  from   angular core   import  FormControl  FormGroup  from   angular forms     Component     selector   example-app     template         lt form  formGroup   form  gt         lt select formControlName  state  gt           lt option  ngFor  let state of states   ngValue   state  gt               state abbrev             lt  option gt         lt  select gt       lt  form gt           lt p gt Form value     form value   json    lt  p gt           lt  --  state   name   New York   abbrev   NY     -- gt            export class ReactiveSelectComp     states          name   Arizona   abbrev   AZ         name   California   abbrev   CA         name   Colorado   abbrev   CO         name   New York   abbrev   NY         name   Pennsylvania   abbrev   PA            form   new FormGroup       state  new FormControl this states 3

User · Answer

Try like this    component html   lt form  formGroup   countryForm  gt       lt select id  country  formControlName  country  gt           lt option  ngFor  let c of countries   ngValue   c  gt    c    lt  option gt       lt  select gt   lt  form gt    component ts  import   FormControl  FormGroup  Validators   from   angular forms    export class Component        countries  string       USA    UK    Canada        default  string    UK        countryForm  FormGroup       constructor             this countryForm   new FormGroup               country  new FormControl null                       this countryForm controls  country   setValue this default   onlySelf  true

User · Answer

As option  if you need just default text in dropdown without default value  try add  lt option disabled value  null  gt default text here lt  option gt  like this    lt select id  country  formControlName  country  gt    lt option disabled value  null  gt default text here lt  option gt    lt option  ngFor  let c of countries   value   c   gt    c    lt  option gt   lt  select gt    In Chrome and Firefox works fine

[angular] Angular 4 - Select default value in dropdown [Reactive Forms]

Examples related to angular