In my Angular 2 application, I have a child component that serves as a modal with fields for email, confirm email, and buttons to Send and Cancel. When I input an invalid email like "Henry" in both email and confirm email fields, the service call doesn't initiate due to the invalid input. However, when I provide a valid email address, I expect the service call to trigger. Essentially, the child component should emit the data to the parent allowing the service call to be made. This modal is simple, with just a Send button that triggers an email service call upon clicking. My objective is to execute the service call only when a valid email address is entered without utilizing any form-group validation, but relying solely on JavaScript regEx to validate the email expression.
HTML snippet:
<md-input placeholder="Email" [(ngModel)]="email" name=""></md-input>
<md-input placeholder="Confirm Email" [(ngModel)]="confirmEmail"name="">
</md-input>
<button (click)="sendEmail()">SEND</button>
<button>CANCEL</button>
In my TypeScript file (.ts):
export class appComponent{
@Input () emailData: {email:string,confirmEmail:string};
}
validateEmail(email) {
var re = /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<<>()[\]\.,;:\s@\"]{2,})$/i;
return re.test(email);
}
private sendEmail() {
if(this.validateEmail(this.emailData)){
this.onEmailSend.emit(this.emailData);
}
}
During debugging, I noticed that while the service call does not proceed with an invalid email entry, it also fails to trigger even with a valid email address input, consequently resulting in the failure of sending the email. Can anyone pinpoint where I may be making errors?