Is it possible to use validators on return values of array (not form)?

Question

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 class="email-text-input"
                                           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!

Answer 1

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%2Fapp%2Fapp.component.html