My goal is to implement a form using Angular, where the submit button remains disabled until the form is valid. When the user clicks the button, the background color of any invalid input should change along with displaying an alert message below the form.
I have attempted to manually disable the button in TypeScript and change the background color based on validity, but this causes the color to change immediately as the form is initially invalid. The desired behavior is for the background color to only change after the submit button has been clicked.
The form should prevent submission of any data until all required input fields are valid while visually indicating which inputs are invalid through background color changes. Below is the HTML code for the form:
<form class="w-50 mb-5 mt-5" (ngSubmit)="onSubmit(f)" #f="ngForm">
<!-- Form inputs here -->
</form>
Below is the corresponding TypeScript code snippet:
@Input() selectedDiv: number;
selectedPackage: string;
<!-- Methods for handling form data and package selection -->
constructor() { }
ngOnInit() {
// Initialize package information based on the selected division
this.changePackageInfo();
}