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

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

component.html

    
        {{ c }}
    

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
    });

  }