Angular / Javascript - вернуть правильный номер onKeyUp

Question

Я пытаюсь проверить действительность электронной почты (когда пользователь начинает вводить onkeyup), а затем, если письмо действительно, я помещаю его в массив уникальных электронных писем; тем не менее, я перестаю выдвигать массив, как только он достигает определенного числа, в моем случае это 3.

     <textarea (ngModelChange)="onKeyUp($event)"></textarea>

     onKeyUp(ev) {

      let finalEmailList = []
      this.finalEmailList = [];

      this.numberOfUsers = 3;

      let emails = ev.replace(' ', '').split(/,| /);

      emails.forEach(email => {
        if (this.validateEmail(email)) {
          //If the email has a valid format, the push it to the array
          finalEmailList.push(email);
          //it's a lodash function to clean the array an keep only unique emails in the array
          this.finalEmailList = _.uniq(finalEmailList);

           if (this.finalEmailList.length <= this.numberOfUsers) {
          this.numberOfUsers -= this.finalEmailList.length;
          }
        }
      })
    }

  //returns true if the email has a valid format
  validateEmail(email) {
    var re = /^(([^<>()\[\]\\.,;:\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,}))$/;
    return re.test(email);
  }

Выпуск:

Я считаю, что это неправильный способ сделать это, поскольку на каждой букве, напечатанной на клавиатуре, все запускается снова и снова, сбрасывая переменные, выполняя циклы и т. Д. *

Также значение, возвращаемое для this.numberOfUsers , неверно.

Answer 1

Насколько я понимаю, у вас есть текстовое поле, где пользователь может ввести несколько адресов электронной почты.Вы хотите проверить каждое и добавить в массив.

Во-первых, вы не должны подписываться на ngModelChange, вместо этого подписаться на событие размытия.Это означает, что только когда пользователь выходит из поля, вы разделяете входное значение на основе разделителя запятых и проверяете каждое из них.

Во-вторых, вы также можете отделить входное значение на основе / n, то есть изменения строки.используя это .split(/\r?\n/)

Таким образом, вам не нужно очищать массив, циклически перебирать значение поля ввода каждый раз, когда пользователь вводит что-то.

Answer 2

Если вы хотите применить проверку к разным записям, самое простое решение - один вход для каждого электронного письма. Не уверен, что это подойдет вам, так как вы еще не сказали, хотите ли вы придерживаться текстовой области или нет, но вот моя идея:

Создайте форму, содержащую formArray со всеми необходимыми электронными письмами.

this.emailsForm = this.fb.group({
  emails: this.fb.array(this.getEmailsFormGroup())
});

Вот как создать formArray:

getEmailsFormGroup() {
  const emailsForms: FormGroup[] = [];

  for (let i=0; i<this.nbEmails; i++) {
    emailsForms.push(this.fb.group({
      email: ['', [emailValidator()], []]
    }));
  }

  return emailsForms;
}

Здесь мы используем преимущества массива validators и вызываем пользовательский валидатор emailValidator, который определен так:

const emailRegex = /^(([^<>()\[\]\\.,;:\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,}))$/;

export function emailValidator(): ValidatorFn {
  return (control: AbstractControl): { [key: string]: any } => {
    return emailRegex.test(control.value) ?
      null :
      { 'not-email-like': { value: control.value } };
  };
}

---

Полный код компонента (TS):

@Component({
  selector: 'app-emails',
  templateUrl: './emails.component.html',
  styleUrls: ['./emails.component.css']
})
export class EmailsComponent implements OnInit {
  nbEmails = 3;

  emailsForm: FormGroup;

  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    this.emailsForm = this.fb.group({
      emails: this.fb.array(this.getEmailsFormGroup())
    });
  }

  getEmailsFormGroup() {
    const emailsForms: FormGroup[] = [];

    for (let i = 0; i < this.nbEmails; i++) {
      emailsForms.push(this.fb.group({
        email: ['email-' + i, [emailValidator()], []]
      }));
    }

    return emailsForms;
  }
}

HTML:

<code>Please enter the {{ nbEmails }} required email{{ nbEmails > 1 ? 's' : '' }}

<form [formGroup]="emailsForm">
  <div formArrayName="emails">
    <div *ngFor="let email of emailsForm.controls['emails'].controls; let i=index" [formGroupName]="i">
      <input
        type="text"
        formControlName="email"
      >
    </div>
  </div>
</form>

<hr>

<div>
  VALID? {{ emailsForm.valid }}
</div>

<hr>

<div>
  <pre>
    {{ emailsForm.value | json }}
  

Вот рабочая версия на Stackblitz:

https://stackblitz.com/edit/angular-lxltri?file=src%2Fapp%2Femails%2Femails.component.ts

Обратите внимание, что у вас есть доступ к свойству valid формы, чтобы вы знали, когда электронные письма X находятся в действительном состоянии.