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\'

Answer 1

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: `
    

      
        
          {{ state.abbrev }}
        
      
    

       
Form value: {{ form.value | json }}
 
       
    `,
})
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]),
  });
}