Angular2 反应式表单在单个输入字段中验证多个电子邮件，例如：电子邮件表单中的 cc答案

【问题标题】：Angular2 reactive form validate multiple email in single input field eg: cc in email formAngular2 反应式表单在单个输入字段中验证多个电子邮件，例如：电子邮件表单中的 cc
【发布时间】：2018-03-27 15:52:58
【问题描述】：

我正在使用 Angular2 和 primeng 构建一个包含以下字段的简单电子邮件表单：

To:
Cc:
Message:

以下是我的组件类中的 sn-p 代码：

  constructor(private fb: FormBuilder) {
    this.createForm();
  }

  createForm() {
    this.requestForm = this.fb.group
    ({
      sendTo: ['', Validators.email],
      copyTo: ['', Validators.email],
      message: ['', Validators.required ]
    });
  }

html 是：

<form [formGroup]="requestForm" (ngSubmit)="onSubmit()" class="ui-g">
  <div class="ui-g-12">
    <div class="ui-g" style="margin-top:30px;margin-bottom:10px;">
      <input formControlName="sendTo" pInputText placeholder="To:" class="ui-g-2">
    </div>
    <div class="ui-g" style="margin-top:30px;margin-bottom:10px;">
      <input formControlName="copyTo" pInputText placeholder="Cc:" class="ui-g-2">
    </div>
    <div class="ui-g" style="margin-top:30px;margin-bottom:10px;">
      <textarea formControlName="message" rows="5" pInputTextArea placeholder="Message" class="ui-g-8">
      </textarea>
    </div>     
    <div class="ui-g">
      <div class="ui-g-8">
        <button pButton type="button" label="Cancel" class="ui-button-secondary" (click)="onCancel()"></button> 
        <button pButton type="submit" [disabled]="requestForm.invalid" label="Submit" class="ui-button-secondary"></button>            
      </div>
    </div>           
  </div>
</form>

在这里，我想验证 copyTo 字段是否包含有效的电子邮件。这不是单个电子邮件字段，因为 CopyTo 将包含多个带有一些分隔符的电子邮件。

谁能帮我实现这一点吗？

谢谢

【问题讨论】：

您需要为此编写一个自定义验证器。只需从输入中获取值并将其拆分为用于分隔电子邮件的任何内容，然后验证每封电子邮件。您可以使用字符串方法 split 返回一个数组，并为每个数组元素执行电子邮件验证。如果一个失败，那么你会显示一条错误消息或其他东西。
为了更好的用户体验，您应该将您的文本输入替换为chips。而且验证每个芯片应该更容易：您不必分开邮件。
@Antikhippe 谢谢。我可以知道如何使用芯片验证电子邮件字段吗？

标签： angular primeng angular-reactive-forms

【解决方案1】：

为了回答您最后的评论，以下是使用芯片验证电子邮件字段的方法。

首先，创建p-chips 元素并添加onAdd 事件以在用户每次验证芯片时进行检查：

<p-chips [(ngModel)]="emails" (onAdd)=testMail($event)></p-chips>

然后，在您的组件中，声明testMail 函数，该函数将检查用户输入是否为有效邮件。如果没有，只需从 emails 字符串数组中删除最后一个条目：

testMail(event) {
  this.errorMessage = ''; // reinitialize error message

  if(!this.validateEmail(event.value)) {
    this.errorMessage = event.value + ' is not a valid mail address !'; // display message
    this.emails.pop(); // remove last entry from emails array of strings
  }
}

见Plunker

【讨论】：