import { Component, OnInit } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';
@Component({
selector: 'app-mycomponent',
templateUrl: './mycomponent.component.html',
styleUrls: ['./mycomponent.component.css']
})
export class MycomponentComponent implements OnInit {
masterSexList = [{id : 1 , name : "Male"} , {id : 2 , name : "Female"}];
masterStateList = [{id : 1 , name : "Maharashtra"} , {id : 2 , name : "Rajasthan"}];
masterCityList = [
{id : 1 , name : "Mumbai" , stateId : 1},
{id : 2 , name : "Pune", stateId : 1},
{id : 3 , name : "Jaipur" , stateId : 2},
{id : 4 , name : "Udaipur" , stateId : 2}
];
cityList : any;
frm = this.fb.group({
firstName : ["" ,
[Validators.required , Validators.minLength(3) , Validators.maxLength(6)]
],
lastName : ["" ,[Validators.required]],
sex : [2 , [Validators.required]], //Default value of 2 corresponds to Female
state : ["" , [Validators.required]],
city : ["" , [Validators.required]]
});
selectedStateId : number = 0;
selectedCityId : number = 0;
selectedSexId : number = 0;
constructor(private fb : FormBuilder) { }
ngOnInit(): void {
//THIS ALSO WORKS => you should pass the id of the object you want to be selected.
//this.frm.get('sex')?.patchValue(1);
}
submit()
{
alert(
this.frm.get('firstName')?.value + " " +
this.frm.get('lastName')?.value + " " +
this.selectedStateId + " " +
this.selectedCityId + " " +
this.selectedSexId
);
}
onSexChange(sexChangeEvent: any)
{
this.selectedSexId = sexChangeEvent.target.value;
}
onCityChange(cityChangeEvent: any)
{
this.selectedCityId = cityChangeEvent.target.value;
}
onStateChange(stateChangeEvent: any)
{
this.selectedStateId = stateChangeEvent.target.value;
if ( this.selectedStateId != undefined && this.selectedStateId != null
&& this.selectedStateId > 0)
this.cityList = this.masterCityList.filter(x=>x.stateId == this.selectedStateId)
}
}
<p>mycomponent works!</p>
<form [formGroup] = "frm" (ngSubmit)="submit()">
<table>
<tr>
<td>
<label>First Name</label>
</td>
<td>
<input type="text" formControlName="firstName" />
</td>
</tr>
<tr>
<td>
<label>Last Name</label>
</td>
<td>
<input type="text" formControlName="lastName" />
</td>
</tr>
<tr>
<td>
<label>Sex</label>
</td>
<td>
<select formControlName="sex" (change)="onSexChange($event)">
<option *ngFor="let sex of masterSexList; let i = index" [value]="sex.id" >{{sex.name}}</option>
</select>
</td>
</tr>
<tr>
<td>
<label>State</label>
</td>
<td>
<select formControlName="state" (change)="onStateChange($event)">
<option value="">Choose your state</option>
<option *ngFor="let state of masterStateList" [value]="state.id">{{state.name}}</option>
</select>
</td>
</tr>
<tr>
<td>
<label>City</label>
</td>
<td>
<select formControlName="city" (change)="onCityChange($event)">
<option value="">Choose your city</option>
<option *ngFor="let city of cityList" [value]="city.id">{{city.name}}</option>
</select>
</td>
</tr>
<tr>
<td colspan="2">
<button type="submit" [disabled] = "!frm.valid">Submit</button>
</td>
</tr>
</table>
</form>
