I have successfully implemented the functionality to disable the button when the email is in the correct format, as shown in my code below.
Now, I am looking to implement the following scenario:
- The Get Started button should be disabled by default
- If a user inputs a valid email, the Get Started button will enable
- Clicking the Get Started button will disable it
- The button will only enable again if the user changes the input in the email field to a valid one
- This will create a cycle of enabling and disabling the button
How can this be achieved in Angular? Is there a more efficient way or technique to accomplish this?
HTML Code
<div fxLayout="column">
<mat-form-field class="full-width" appearance="fill" style="margin-top: 20px;">
<mat-label>Email</mat-label>
<input type="email" matInput autocomplete="emailAddress" matInput formControlName="emailAddress" />
<mat-error *ngIf="modelForm.get('emailAddress').hasError('email')">
Email is in invalid format.
</mat-error>
<mat-error *ngIf="modelForm.get('emailAddress').hasError('required')">
Email is required.
</mat-error>
</mat-form-field>
</div>
<form (click)="getStarted()">
<div style="text-align:right;margin-top: 19.0px;">
<button [disabled]="modelForm?.get('emailAddress').invalid" mat-flat-button color="primary"
class="v-btn-sml" id="get-started-button">
Get Started
</button>
</div>
</form>
TS Code
ngOnInit(): void {
this.initFormGroup();
}
initFormGroup() {
this.modelForm = this.formBuilder.group({
id: [this.model.id || 0],
emailAddress:[this.model.emailAddress,[Validators.required, Validators.email]],
firstName: [this.model.firstName,Validators.required],
roleId: this.model.roleId,
lastName: [this.model.lastName,Validators.required],
phoneNumber: this.model.phoneNumber,
companyName: [this.model.companyName,Validators.required],
ssocredentials: this.model.ssocredentials || '',
accountId: this.accountId,
title: this.model.title,
isSso: this.model.isSso || '',
});
}