Angular2 反应形式在单个输入字段中验证多个电子邮件，例如：电子邮件形式的抄送

Question

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

To:
Cc:
Message:

以下是我的组件 class 中的代码片段：

  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 将包含多封电子邮件，其中有一些分隔。

谁能帮我实现这个目标？

谢谢

Answer 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

Angular2 反应形式在单个输入字段中验证多个电子邮件，例如：电子邮件形式的抄送

Angular2 reactive form validate multiple email in single input field eg: cc in email form

primeng

angular

angular-reactive-forms