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>
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
