Angular 6 select default value not working

Question

I have a select dropdown with a default selected disabled value, and a list of districts that is loaded from backend. My issue is that the dropdown never show the selected value, always show blank.

<form [formGroup]="districtForm">
  District:
  <select formControlName="districtControl" (change)="filterBuildings($event.target.value)" [value]='' class="form-control">
    <option value="" disabled selected>Please select district</option>
    <option *ngFor="let district of districts" [ngValue]="district">
      {{district.districtName}}
    </option>
  </select>
  <div *ngIf="errorMessageDistrict" class="text-danger">District is required
  </div>
</form>

Here is my ts code:

import { Component } from '@angular/core';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { InfoService } from '../../services/info.service';
import { first } from 'rxjs/operators';
import { District } from '../../models/district';
import { FormGroup, FormControl, FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-school-switch',
  templateUrl: './school-switch.component.html',
  styleUrls: ['./school-switch.component.scss']
})
export class SchoolSwitchComponent {
  districts: District[] = [];
  selectedDistrict: District;
  errorMessageDistrict;
  firstDistrict: any;
  districtForm = new FormGroup({
    districtControl: new FormControl()
  });

  constructor(
    public activeModal: NgbActiveModal,
    private infoService: InfoService,
    private fb: FormBuilder
  ) {}

  ngOnInit() {
    this.infoService
      .getDistricts()
      .pipe(first())
      .subscribe(districts => {
        this.districts = districts;
      });
  }

  filterBuildings(filterVal: any) {
      this.selectedDistrict = this.districtForm.value.districtControl;
      //some more code
  }

Add ts code also

Indrakumara
– Indrakumara

2018-09-17 14:50:14 +00:00
Commented Sep 17, 2018 at 14:50 — Indrakumara
– Indrakumara, Commented Sep 17, 2018 at 14:50
@Indrakumara done

Howl Jenkins
– Howl Jenkins

2018-09-17 18:20:03 +00:00
Commented Sep 17, 2018 at 18:20 — Howl Jenkins
– Howl Jenkins, Commented Sep 17, 2018 at 18:20

xrobert35 · Accepted Answer · 2018-09-17 18:22:29Z

3

Generally I create the FormGroup in the ngOnInit and then define default value in it like this :

import { FormGroup, FormBuilder, Validators } from '@angular/forms';

constructor(private formBuilder: FormBuilder){
}

ngOnInit(){
      this.districtForm = this.formBuilder.group({
        districtControl: ['myDefaultValue', Validators.required]
      });
}

answered Sep 17, 2018 at 18:22

xrobert35

2,5761 gold badge19 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Surya R Praveen Over a year ago

Default Option in select with value="" and included attributes selected or disabled. The dropdown won't work. Instead Use the validators. required. This works like charm. districtControl: ['myDefaultValue', Validators.required]

SiddAjmera · Accepted Answer · 2018-09-17 19:16:49Z

2

Get rid of [value] and instead use [(ngModel)] with selectedDistrict for select in your Template which would be initialized to 'none' in the TypeScript class. Also add [ngValue] to the Placeholder Option. Something like this:

<form [formGroup]="districtForm">
  District:
  <select 
    formControlName="districtControl" 
    [(ngModel)]="selectedDistrict" 
    class="form-control">
    <option 
      [ngValue]="'none'" 
      disabled 
      selected>
      Please select district
    </option>
    <option 
      *ngFor="let district of districts" 
      [ngValue]="district">
      {{district.districtName}}
    </option>
  </select>
  <div 
    *ngIf="errorMessageDistrict" 
    class="text-danger">
    District is required
  </div>
</form>

Here's a Sample StackBlitz for your reference.

edited Sep 17, 2018 at 19:16

answered Sep 17, 2018 at 14:30

SiddAjmera

39.6k7 gold badges77 silver badges113 bronze badges

2 Comments

Howl Jenkins Over a year ago

It doesn't work either, besides I'm getting this warning: "It looks like you're using ngModel on the same form field as formControlName. Support for using the ngModel input property and ngModelChange event with reactive form directives has been deprecated in Angular v6 and will be removed in Angular v7."

Dhatri Suresh Over a year ago

It worked for me..thank you...changing from value to [ngvalue] worked..

Mohit Kumar · Accepted Answer · 2020-08-14 18:46:14Z

Do not assign any default value in Form Control else your Validators.required will be of no use, instead use one default option in select with value = "" without disabled as shown below:

<form [formGroup]="districtForm">
  District:
  <select formControlName="districtControl" class="form-control">
    <option value="">Select District</option>
    <option *ngFor="let district of districts" [value]="district">
      {{district.districtName}}
    </option>
  </select>
  <div *ngIf="errorMessageDistrict" class="text-danger">District is required
  </div>
</form>

Form Control in Component.ts:

import { FormGroup, FormBuilder, Validators } from '@angular/forms';

constructor(private formBuilder: FormBuilder){
}

districtForm: FormGroup;

ngOnInit(){
      this.createDistrictForm();
}

createDistrictForm(){
    this.districtForm = this.formBuilder.group({
        districtControl: ['', Validators.required]
      });
}

Tadele Ayelegn · Accepted Answer · 2023-01-14 02:47:09Z

0

You could do this way

    <select
                         
           [ngModel]="currentTimeZone"
           (change)="onSelectingValue($event)"
           #timeZone="ngModel"
                       >
                     <option *ngFor="let timeZone of allTimeZones"> 
 {{timeZone}}</option>
    </select>

In the Component you could have

allTimeZones: string = ["PST", "EST", "CT"];
currentTimeZone = "PST"

When it does not work? If you have a value for currentTimeZone which is different from one of allTimeZones. Example currentTimeZone = "MT" will NOT WORK

answered Jan 14, 2023 at 2:47

Tadele Ayelegn

4,8622 gold badges39 silver badges32 bronze badges

Collectives™ on Stack Overflow

Angular 6 select default value not working

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related