I have created a function which extracts emails from given text. Now I want to validate the extracted emais with already existing validators. But I am not quite sure if this is possible on return values of a string array.
Function I use to extract emails from text:
//Variables
emailText: string;
emailArray: string[];
getEmailAddressFromText():string [] {
let regexToExtractEmails= /(?:[a-z0-9 !#$%&'* /=?^_`{|}~-] (?:\.[a-z0-9!#$%&'* /=?^_`{|}~-] )*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.) [a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f]) )\])/gi;
return this.emailArray= this.emailText.match(regexToExtractEmails);
}
HTML-Code for text area and display result
<mat-form-field appearance="outline">
<textarea
matInput
placeholder="placeholder="Add E-Mail""
[ngModelOptions]="{standalone: true}"
[(ngModel)]="emailText"
(keyup.enter)="getEmailAddressFromText()"
(keyup.enter)="clearInput()"
> </textarea>
</mat-form-field>
<ul *ngFor="let email of emailArray">
<ul >Email: {{email}} </ul>
</ul>
I would like to know whether it is possible to use already existing Validators on return values of a string array which are not defined as form fields.
How can this be done or is there a better way?
Thank you all in advance!
CodePudding user response:
Seeing how you're pretty good with regex. I might suggest an pure pipe to check each email validity. If it's not valid color is red, if valid it's green.
<ul *ngFor="let email of emailArray">
<li
[ngClass]="{
'text-red': !(email | validEmail),
'text-green': (email | validEmail)
}"
>
Email: {{ email }}
</li>
</ul>
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
emailText = '[email protected], [email protected], [email protected]';
emailArray: RegExpMatchArray;
constructor() {}
ngOnInit(): void {
this.getEmailAddressFromText();
}
getEmailAddressFromText() {
let regexToExtractEmails =
/(?:[a-z0-9 !#$%&'* /=?^_`{|}~-] (?:\.[a-z0-9!#$%&'* /=?^_`{|}~-] )*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.) [a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f]) )\])/gi;
this.emailArray = this.emailText.match(regexToExtractEmails);
console.log(this.emailArray)
}
}
@Pipe({name: 'validEmail'})
export class ValidEmailPipe implements PipeTransform {
transform(email: string): boolean {
const EMAIL_REGEXP = /^[a-z0-9!#$%&'* \/=?^_`{|}~.-] @[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/i;
console.log('Is email valid: ', EMAIL_REGEXP.test(email))
return EMAIL_REGEXP.test(email)
}
}
Working example: https://stackblitz.com/edit/angular-reactive-forms-12-e4dwh1?file=src/app/app.component.html