how to validate two dropdowns depends upon selection? - angular10

Question

I have two Dropdowns first dropdown 1 to 23 hours and the second dropdown also 1 to 23 hours.
If I select the first Dropdown is 4.the second drop-down is higher than the first dropdown selected value. how to do that

Answer 1

This is the solution for your concern. I have used the form if you are not used form then remove it and take the normal angular control.
HTML
<form [formGroup]="form" (ngSubmit)="submit()">
<div class="form-group">
<select formControlName="firstDropdown" class="form-control" (change)="firstDropDownChange($event)">
<option *ngFor="let value of values" [value]="value">
<span>{{ value }}</span>
</option>
</select>
<select formControlName="secondDropdown" class="form-control" (change)="secondDropDownChange($event)">
<option *ngFor="let value of values1" [value]="value">
<span>{{ value }}</span>
</option>
</select>
</div>
<button class="btn btn-primary" type="submit" [disabled]="!form.valid">
Submit
</button>
</form>
TS
values: any = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23];
values1: any = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23];
firstDropdown: any = 1;
secondDropdown: any = 1;
form: FormGroup;
constructor() {
this.form = new FormGroup({
firstDropdown: new FormControl(1),
secondDropdown: new FormControl(1),
});
}
firstDropDownChange(event) {
this.values1 = this.values.filter(
(data) => parseInt(event.target.value) <= data
);
console.log(this.values1);
this.form.controls['secondDropdown'].setValue(parseInt(this.values1[0]));
}
secondDropDownChange(event) {}
submit() {}