How to add Validation to multiple Email address to one recipient field comma separated - Angular 5

Question

I have an issue in validating multiple comma separated email address to one recipient field. I have no issue in validating one email. Any pointers are much appreciated. My code is below thanks.

html

<form ng-submit="onSend()" [formGroup]="sendEmailForm">
<div class="email-field">
    <mat-form-field>
      <input matInput #emailTo placeholder="to@company.ca, to@company.ca..." formControlName="toAddress">
    </mat-form-field>
</form>

Typescript

ngOnInit() {

this.sendEmailForm = this.fb.group({
  toAddress: new FormControl('', [Validators.email, Validators.required])        

});

}

Will I have to write any custom validator?

Answer 1

You could create custom validator which calls Validators.email for each email in input value - stackblitz

  commaSepEmail = (control: AbstractControl): { [key: string]: any } | null => {
    const emails = control.value.split(',').map(e=>e.trim());
    const forbidden = emails.some(email => Validators.email(new FormControl(email)));
    return forbidden ? { 'toAddress': { value: control.value } } : null;
  };

and use it like

this.sendEmailForm = this.fb.group({
      'toAddress': ['', [Validators.required, this.commaSepEmail]]
});