CODEWITHSUNDEEP
angular
Sole
Sole

Reputation: 3340

How to display default value in select option in Angular form field

I have a select form field in Angular 6 application and the options are coming in from an array. But the default value is not being shown or selected state? So far my code is as follows:

<select formControlName="category" class="form-select">
    <option *ngFor="let state of category" [value]="state.category">
        {{ state.category }}
    </option>
</select>

ts.file

category = [
    { category: 'Nothing'},
    { category: 'Additional'},
    { category: 'Changing'},
  ];


ngOnInit() {
this.serviceForm = new FormGroup({
  category: new FormControl(this.category[0]),
});

}

Upvotes: 0

Views: 749

Answers (2)

Ramesh Roddam
Ramesh Roddam

Reputation: 283

You can do it like this:

<select(change)="ChangingValue($event)" [value]='55'>
<option value='50'>50/option>
<option value='55'>55</option>
<option value='60'>60</option>
<option value='70'>70</option>
</select>

Upvotes: 0

ferhado
ferhado

Reputation: 2604

Set a default value for ngModel for select like:

class AppComponent {
  defaultCateg:string="Additional";
}

html:

<select [ngModel]="defaultCateg">

Here is an examle

Upvotes: 1

Related Questions