I am facing an issue where the button remains disabled even after the correct condition is met for a certain range of values in a separate input.
The main goal is to prevent users from clicking the button if they enter incorrect data in the input field and proceed directly to the button without being prompted to correct the number of passengers entered.
Here is the HTML code snippet:
<input type="number" id="passengers" [(ngModel)]="numberOfPassengers" (change)="checkValue()">
<a routerLink="/summary"><button [disabled]="checkButton()" (click)="saving()">To Summary</button></a>
In the component.ts file:
ngOnInit() {
this.buttonDisabled = true
}
public numberOfPassengers: number;
public errorMessage: string = "";
public errorMessageSubmit: string = ""
public buttonDisabled: boolean;
checkButton() {
if (this.numberOfPassengers <= 0 && this.numberOfPassengers > 9) {
return true;
} else {
return false;
}
}
checkValue() {
if (this.numberOfPassengers <= 0) {
this.errorMessage = "Choose at least 1 passenger";
return (this.numberOfPassengers = 1);
} else if (this.numberOfPassengers > 9) {
this.errorMessage = "Maximum of 9 passengers is allowed";
return (this.numberOfPassengers = 9);
}
}
If anyone can provide insights on what I might be missing or doing wrong, it would be greatly appreciated!