Question

我正在尝试检查电子邮件的有效性（当用户开始输入onkeyup时），然后如果电子邮件有效，我将其推送到一系列独特的电子邮件中;但是，一旦达到某个数字，我就会停止推送到数组，在我的情况下它是3。

{{1}}

问题：

我认为这是一种错误的方式，因为在键盘上打印的每一个字母都会一次又一次地运行，重置变量，运行循环等等......

this.numberOfUsers 的返回值也不正确。

Answer 1

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

创建一个包含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电子邮件何时处于有效状态。

Answer 2

据我所知，你有一个textarea，用户可以输入多个emailIds。您想验证每个并添加到数组中。

首先，您不应订阅ngModelChange，而是订阅blur事件。这意味着只有当用户移出字段时，才会根据逗号分隔符拆分输入值并验证每个输入值。

其次，您还可以根据/ n（即换行）分离输入值。使用此.split(/\r?\n/)

这样您就不必清理数组，每次用户输入内容时都会循环输入字段值。

Answer 3

如果您希望在验证之前完成电子邮件地址，则按照他人的建议验证onBlur可能是您的最佳选择。另一种选择是继续监听onKeyUp，但仅在键是特定的触发键时才触发验证。

示例：

onKeyUp(event) {
  if ([13, 188].includes(event.keyCode)) {
    validateEmails()
  }
}

在此示例中，Enter键和逗号分别为13和188。

Answer 4

我宁愿只有一个输入和一个添加按钮。输入电子邮件并在添加按钮的单击事件上运行逻辑，这将确保代码仅在需要时运行，并为用户提供更好的UX。像git这样的用户配置文件已完成 Reference UI

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

4 个答案: