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

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

1 个答案: