Angular 4 - Select default value in dropdown [Reactive Forms]
Try like this :
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 {
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});
}
}
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: `
<form [formGroup]="form">
<select formControlName="state">
<option *ngFor="let state of states" [ngValue]="state">
{{ state.abbrev }}
</option>
</select>
</form>
<p>Form value: {{ form.value | json }}</p>
<!-- {state: {name: 'New York', abbrev: 'NY'} } -->
`,
})
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]),
});
}
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)
I was struggling and Found this Easy and Effective way from IntelliJ IDEA
suggestion
<select id="country" formControlName="country" >
<option [defaultSelected]=true [value]="default" >{{default}}</option>
<option *ngFor="let c of countries" [value]="c" >{{ c }}</option>
</select>
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.
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
<select id="country" formControlName="country" [(ngModel)]="selectedCountry">
<option *ngFor="let c of countries" [value]="c" >{{ c }}</option>
</select>
Plunker link