I am working on an Angular6 form that includes a field for email input.
Currently, the email field has proper validation which displays an error message when an invalid email is entered. However, even if the error message is shown, the form is still saved when the "Save" button is clicked. How can I display the error message without saving the user upon clicking?
An important requirement is that the "Save" button should not be disabled.
Below is the code from user.component.html:
<form method="post" enctype="multipart/form-data>
<mat-form-field>
<input matInput placeholder="Enter your Username" [(ngModel)]="userObj.userName" name="username" required>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Enter your email" [formControl]="email" [(ngModel)]="userObj.emailid" name="emailid" required>
<mat-error *ngIf="email.invalid">{{getErrorMessage()}}</mat-error>
</mat-form-field>
</form>
<button mat-raised-button color="primary" (click)="saveNewUserDetails()">Save User</button>
And here is the code from user.component.ts:
import {FormControl, Validators} from '@angular/forms';
email = new FormControl('', [Validators.required, Validators.email]);
getErrorMessage() {
return this.email.hasError('required') ? 'You must enter a value' :
this.email.hasError('email') ? 'Not a valid email' : '';
}
saveNewUserDetails(){
if(this.userObj.userName.trim() != ''){
const formData = new FormData();
formData.append('username',this.userObj.userName);
formData.append('emailid',this.userObj.emailid);
this.userService.saveNewUserDetails(formData).subscribe(
(data) => {
console.log("user is saved successfully");
}
)
}
}