Разделенная запятыми проверка идентификатора электронной почты через Regex в шаблоне в Angular 5?

Question

У меня есть проект на Angular 5. Есть поле ввода для идентификаторов электронной почты.Я хотел добиться следующего:

Разрешить пользователю вводить максимум 3 идентификатора электронной почты, и, очевидно, каждый идентификатор электронной почты будет подтвержден.Я достиг этого через:

1. Создание функции в моем файле TS: я разделял пользовательский ввод на значения, разделенные запятыми, и сохранял их в массиве.
2. Я устанавливал максимальную длину массива равной 3 и проверял каждый элемент массива, просматривая его, и отображал соответствующие сообщения об ошибках в шаблоне в соответствии с условиями.
3. Функция вызывается (ngModelChange)

Мой старый код шаблона:

<div class="form-group col-md-6">
    <label for="mailingList">Mailing Lists ( Max 3 Email IDs ) </label>
    <input type="email" multiple class="form-control formgroup" placeholder="Enter Comma Separated Mailing Lists (Max 3)" [(ngModel)]="team.mailingList" name="mailingList" (ngModelChange)="validateMailingLists()" required>
    <p *ngIf="!emailValid" class="red">{{ errorMessage }} </p>
</div>

Это мой старый код TS:

const emailRegex = new RegExp(/^(([^<>()\[\]\\.,;:\s@]+(\.[^<>()\[\]\\.,;:\s@]+)*)|(.+))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/);

validateMailingLists() {
    const sanitizedEmail = this.team.mailingList.replace(/,\s*$/, '').trim().split(',');
    this.emailValid = sanitizedEmail.every(email => emailRegex.test(email));
    if (this.emailValid === false) {
        this.errorMessage = 'Please enter valid E-Mail ID(s)';
    } 
    else if (sanitizedMailingList.length > 3) {
        this.emailValid = false;
      this.errorMessage = 'You can enter max 3 Email ID(s)';
    }
}

Однако,вместо создания функции и последующего ее вызова на ngModelChange я пытался выполнить проверку самого шаблона.

Это то, что я пробовал до сих пор:

Новый код шаблона:

<label for="mailingList">Mailing Lists ( Max 3 Email IDs ) </label>
<span class="red">*</span>
<span class="red" *ngIf="mailingList.errors && (mailingList.touched || mailingList.dirty)">Invalid E-Mail ID(s) </span>
<input type="email" multiple class="form-control formgroup" placeholder="Enter Comma Separated Team Mailing List (Max 3)" [(ngModel)]="team.mailingList" name="mailingList" pattern="^(([^<>()\[\]\\.,;:\s@]+(\.[^<>()\[\]\\.,;:\s@]+)*)|(.+))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$" #mailingList="ngModel" mailingList required>

Мои вопросы:

1. Могу ли я разделить ввод пользователя на значения, разделенные запятыми, с помощью Regex в шаблоне, и если да, то как?Регулярное выражение, которое я сейчас использую в шаблоне, только проверяет, является ли ввод действительным идентификатором электронной почты, но не разделяет ввод пользователя на значения, разделенные запятыми.

2. Кроме того,как разрешить пользователю вводить не более 3 идентификаторов электронной почты через Regex?

Раньше это было возможно с помощью функций разделения, обрезки и замены строк.

Я много искал, но не нашел решения для этого.Спасибо.

Answer 1

Используйте это регулярное выражение для проверки 3 адресов электронной почты.

^(([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5}),?\s*){1,3}$

Примечание: {1,3} позволяет пользователю вводить до 3 идентификаторов электронной почты.

Answer 2

Вы можете использовать следующее регулярное выражение:

^(\s?[^\s,]+@[^\s,]+\.[^\s,]+\s?,)*(\s?[^\s,]+@[^\s,]+\.[^\s,]+)$

Здесь вы можете проверить регулярное выражение.