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

Question

我正在使用angular2和primeng来构建一个简单的电子邮件表单，并具有以下字段：

To:
Cc:
Message:

以下是我的组件类中的摘要代码：

  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