Issue
I have a requirement for inputting 50 email address with a same domain name (gmail.com).
I am using a Reactive form. I have added some code that I have written form it is not working for me.
https://stackblitz.com/edit/angular-wfwfow
Can anyone help me on this please?
emailPattern = "[a-zA-Z0-9_.+-,;]+@(?:(?:[a-zA-Z0-9-]+\.,;)?[a-zA-Z]+\.,;)?(gmail)\.com";
ngOnInit() {
this.accountingForm = this.fb.group({
'day' : [null, Validators.required],
'email': ['',
Validators.compose([
Validators.required,Validators.pattern(this.emailPattern),this.commaSepEmail
])
]
});
}
commaSepEmail = (control: AbstractControl): { [key: string]: any } | null => {
console.log("This is value:" + control.value);
if (!_.isEmpty(control.value)){
var emails= control.value.split(',');
const forbidden = emails.some((email:any) => Validators.email(new FormControl(email)));
console.log(forbidden);
return forbidden ? { 'email': { value: control.value.trim() } } : null;
}
}; <form [formGroup]="accountingForm" (ngSubmit)="generateSOR(accountingForm.value)">
<input formControlName="email" [pattern]="emailPattern" placeholder="Email Address">
<button type="submit" mat-raised-button class="mat-primary" [disabled]="!accountingForm.valid">Generate</button>
</form>Solution
I believe I spotted the issue you are having with the button not being enabled. if you change your emailPattern
from string format
emailPattern = "[a-zA-Z0-9_.+-,;]+@(?:(?:[a-zA-Z0-9-]+\.,;)?[a-zA-Z]+\.,;)?(gmail)\.com";
to regex format
emailPattern = /[a-zA-Z0-9_.+-,;]+@(?:(?:[a-zA-Z0-9-]+\.,;)?[a-zA-Z]+\.,;)?(gmail)\.com/;
I believe it will work. From what I was testing you might want to fine tune the regex to better achieve your expected results but this solves the issue with the button not being enabled.
I usually prefer to use regex expressions when possible instead of strings. It’s also more readable.
Answered By – Hugo Noro
Answer Checked By – Marie Seifert (BugsFixing Admin)