Angular/Javascript - 在keyUp上返回正确的数字

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

如果您想对不同的条目进行检查，最简单的解决方案是每封电子邮件有一个输入。不确定它是否适合您的需要，因为您还没有说是否要坚持使用文本区域，但这是我的想法：

创建一个包含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;
}

在这里，我们利用验证器数组并调用自定义验证器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：

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 }}
  </pre>
</div>

这是 Stackblitz 上的一个工作版本：

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

valid请注意，您可以访问表单的属性，以便您知道 X 电子邮件何时处于有效状态。