locked
Angular dropdown selected not working when used Ngmodel and validation RRS feed

  • Question

  • User-2103114970 posted

    Hi ,

    Could anybody help me , how to use selected first item in dropdown when used NgModel and need  validiation also.

    Please find my html and component 

    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>

     

    Wednesday, November 21, 2018 6:17 PM

Answers

  • User61956409 posted

    Hi Konanki,

    default selected is not working

    Based on the code that you provided, I do a test with following code snippet to bind <select> and specify default option for <select>, which works for me, please refer to it.

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

    In employee-crud.component.ts

    Example countryInfoList

    countryInfoList = [{'CountryId': 1, 'CountryName': 'Country1'},
    {'CountryId': 2, 'CountryName': 'Country2'}];

    Assign this.employeeSearch.Country with 2:

    ngOnInit() {
        // other code logic
    
        this.employeeSearch.Country = 2;
    }

    Test Result:

    If you assigned the number type value to this.employeeSearch.Country, please make sure the item's CountryId field is also number type value.

    With Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, November 22, 2018 8:35 AM

All replies

  • User61956409 posted

    Hi Konanki,

    default selected is not working

    Based on the code that you provided, I do a test with following code snippet to bind <select> and specify default option for <select>, which works for me, please refer to it.

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

    In employee-crud.component.ts

    Example countryInfoList

    countryInfoList = [{'CountryId': 1, 'CountryName': 'Country1'},
    {'CountryId': 2, 'CountryName': 'Country2'}];

    Assign this.employeeSearch.Country with 2:

    ngOnInit() {
        // other code logic
    
        this.employeeSearch.Country = 2;
    }

    Test Result:

    If you assigned the number type value to this.employeeSearch.Country, please make sure the item's CountryId field is also number type value.

    With Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, November 22, 2018 8:35 AM
  • User-2103114970 posted

    Thank you so much Fei Han, Appreciate your help.

    Friday, November 23, 2018 6:52 PM