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>
