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