Angular 6 dropdown default selected is not working when i used ngModel

[Murali Krishna]

Hi,

Could some one help me on below requirement 

i have a dropdown , bindind like below , but default selected is not working  and need validation also if user selected value is 0 .

Type script: 

import { Component, OnInit } from '@angular/core';

import { EmployeeDetails } from '../models/employee-details';

import { CountryInfo } from '../models/country-info';

import { StateInfo } from '../models/state-info';

import { CityInfo } from '../models/city-info';

import { EmployeeSearch } from '../models/employee-search';

import { EmployeeInfo } from '../models/employee-info';

import { map, catchError, finalize } from 'rxjs/operators';

import { HttpClient } from '@angular/common/http';

import { EmployeeServiceService } from '../services/employee-service.service';

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

@Component({

selector: 'app-employee-crud',

templateUrl: './employee-crud.component.html',

styleUrls: ['./employee-crud.component.css']

})

export class EmployeeCrudComponent implements OnInit {

employeeDetailsList: EmployeeDetails[];

employeeSearch: EmployeeSearch = new EmployeeSearch();

employeeSearchResult: EmployeeSearch;

// {

// EmpNo: 0,

// EmpName: '',

// Salary: 0,

// City: 0,

// States: 0,

// Country: 0,

// StartDateOfJoin: new Date(),

// EndDateOfJoin: new Date()

// };

errors: string = null;

countryInfoList: CountryInfo[];

employeeCrudForm: FormGroup;

submitted = false;

constructor(private httpClient: HttpClient, private employeeService: EmployeeServiceService,

private formBuilder: FormBuilder) { }

ngOnInit() {

this.employeeCrudForm = this.formBuilder.group({

EmpNo: ['', Validators.required],

EmpName: ['', Validators.required],

Salary: ['', Validators.required],

CountryId: ['', Validators.required],

});

this.getEmployeeDetails();

this.getCountryDetails();

}

// convenience getter for easy access to form fields

get f() { return this.employeeCrudForm.controls; }

selectCountryChange( countryValue: number) {

this.employeeSearch.Country = countryValue;

}

onEmployeeSearch() {

this.submitted = true;

// stop here if form is invalid

if (this.employeeCrudForm.invalid) {

return;

}

this.employeeSearchResult = this.employeeSearch;

}

getEmployeeDetails() {

this.employeeService.getEmployeeDetails()

.subscribe(data => {

this.employeeDetailsList = data;

},

error => {

this.errors = error;

});

}

getCountryDetails() {

this.employeeService.GetCountriesDetails() .subscribe(data => {

this.countryInfoList = data;

},

error => {

this.errors = error;

});

}

}

Html Pages:

----------

<div>

<form [formGroup]="employeeCrudForm" (ngSubmit)="onEmployeeSearch()">

<div class="row">

<div *ngIf="errors" class="alert alert-danger">

{{ errors }}

</div>

</div>

<div class="jumbotron">

<div class="container">

<div class="row">

<div class="col-md-6 offset-md-3">

<div class="form-group">

<label>Employee Number:</label>

<input type="text" [(ngModel)]="employeeSearch.EmpNo" name="EmpNo" formControlName="EmpNo" class="form-control"

[ngClass]="{ 'is-invalid': submitted && f.EmpNo.errors }" />

<div *ngIf="submitted && f.EmpNo.errors" class="invalid-feedback">

<div class="alert alert-danger" *ngIf="f.EmpNo.errors.required">EmpNo is required</div>

</div>

</div>

<div class="form-group">

<label>Employee Name:</label>

<input type="text" [(ngModel)]="employeeSearch.EmpName" name="EmpName" formControlName="EmpName" class="form-control"

[ngClass]="{ 'is-invalid': submitted && f.EmpName.errors }" />

<div *ngIf="submitted && f.EmpName.errors" class="invalid-feedback">

<div class="alert alert-danger" *ngIf="f.EmpName.errors.required">EmpName is required</div>

</div>

</div>

<div class="form-group">

<label>Employee Salary:</label>

<input type="text" [(ngModel)]="employeeSearch.Salary" name="Salary" formControlName="Salary" class="form-control"

[ngClass]="{ 'is-invalid': submitted && f.Salary.errors }" />

<div *ngIf="submitted && f.Salary.errors" class="invalid-feedback">

<div class="alert alert-danger" *ngIf="f.Salary.errors.required">Salary is required</div>

</div>

</div>

<div class="form-group">

<label>Country : </label>

<select name="CountryId" formControlName="CountryId" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.CountryId.errors }"

(ngModelChange)="selectCountryChange($event)" [(ngModel)]="employeeSearch.Country" >

<!-- <option value="" selected >Select</option> -->

<option value="0">--All--</option>

<option *ngFor ="let country of countryInfoList;" [ngValue]="country.CountryId">{{country.CountryName}} </option>

</select>

<div *ngIf="submitted && f.CountryId.errors" class="invalid-feedback">

<div class="alert alert-danger" *ngIf="f.CountryId.errors.required">CountryId is required</div>

</div>

<!-- <div *ngIf="submitted && f.CountryId.errors" class="invalid-feedback">

<div class="alert alert-danger" *ngIf="f.CountryId.errors.required">CountryId is required</div>

</div>

(change)="filterForeCasts($event.target.value)"

class="form-control" name="CountryId" formControlName="CountryId" class="form-control"

[ngClass]="{ 'is-invalid': submitted && f.CountryId.errors }"

-->

</div>

<div class="form-group">

<button class="btn btn-primary">Search</button>

</div>

<!-- <div>

<label>Country: </label>

<select [(ngModel)]="employeeSearch.Country" >

<option value="0">--All--</option>

<option *ngFor="let country of countryInfoList" >

{{country.CountryName}}

</option>

</select>

</div> -->

<div class="form-group" *ngIf="employeeDetailsList?.length > 0">

<table class="table table-striped">

<thead>

<tr style="background-color: #545550;">

<tr>

<th class="colHeader">Employee Number</th>

<th class="colHeader">Employee Name</th>

<th class="colHeader">Salary</th>

<th class="colHeader">City</th>

<th class="colHeader">State</th>

<th class="colHeader">Country</th>

<th class="colHeader">DateOfJoin</th>

</tr>

</thead>

<tbody>

<tr *ngFor="let employeeDetails of employeeDetailsList ">

<td>{{employeeDetails.EmpNo}} </td>

<td>{{employeeDetails.EmpName}} </td>

<td>{{employeeDetails.Salary}} </td>

<td>{{employeeDetails.City}} </td>

<td>{{employeeDetails.States}} </td>

<td>{{employeeDetails.Country}} </td>

<td>{{employeeDetails.DateOfJoin}} </td>

</tr>

</tbody>

</table>

</div>

</div>

</div>

</div>

</div>

</form>

</div>

[Sander Elias]

Hi Murali,

Can you make a minimal reproduction on stackblitz? Will make it much easier to help you.

Regards

Sander