如何使用模板驱动表单验证 angular8 中的多个电子邮件 ID

Question

您好，我正在使用模板驱动表单开发 Angular8，其中我想验证多个电子邮件 ID，我有 2 个电子邮件字段，一个是 To，另一个是 CC。如果电子邮件 ID 存在并且它有效，那么我将启用发送电子邮件按钮，但是当我尝试使用多个电子邮件 ID 时，验证失败并且我收到错误电子邮件 ID。这里如果有一个email id也必须验证，如果是多个email id也必须验证。

HTML：

<div class="row mb-3">
                <div class="col-2">To:</div>
                <div class="col"><input type="email" class="form-control" autocomplete="off" [(ngModel)]="userMail"  pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$" #userContactemail="ngModel" placeholder="Email" >
                    <div class="md-errors-spacer email-error"
                        [hidden]="userContactemail.valid || userContactemail.untouched">
                        <div *ngIf="userContactemail.errors && userContactemail.errors.pattern" class="error">
                            Invalid Email
                        </div>
                    </div>
                </div>
            </div>
            <div class="row mb-3">
                <div class="col-2">Cc:</div>
                <div class="col"><input type="email" class="form-control" [(ngModel)]="userCC" pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$" #userContactCC="ngModel" placeholder="Email" >
                    <div class="md-errors-spacer email-error"
                        [hidden]="userContactCC.valid || userContactCC.untouched">
                        <div *ngIf="userContactCC.errors && userContactCC.errors.pattern" class="error">
                            Invalid Email
                        </div>
                    </div>
                </div>
            </div>

DEMO

Answer 1

我已经修改了答案，现在请检查它应该可以工作。

    <div id="confirmationModal" class="dialog-container modal">
    <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header bg-info">
                <h5 class="modal-title text-white" id="exampleModalLongTitle">Email</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" >
          <span aria-hidden="true">&times;</span>
        </button>
            </div>
            <div class="modal-body">
                <div class="row mb-3">
                    <div class="col-2">To:</div>
                    <div class="col"><input type="email" class="form-control" autocomplete="off" [(ngModel)]="userMail"  (blur)="onSearchChange('userMail')" #userContactemail="ngModel" placeholder="Email" >
                        <div class="md-errors-spacer email-error"
                            [hidden]="userMailValid || userContactemail.untouched">
                            <div *ngIf="!userMailValid" class="error">
                                Invalid Email
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-2">Cc:</div>
                    <div class="col"><input type="email" class="form-control" [(ngModel)]="userCC" (blur)="onSearchChange('userContactCC')" #userContactCC="ngModel" placeholder="Email" >
                        <div class="md-errors-spacer email-error"
                            [hidden]="userCCValid || userContactCC.untouched">
                            <div *ngIf="!userCCValid" class="error">
                                Invalid Email
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-2">Subject:</div>
                    <div class="col"><input type="email" class="form-control"  [ngModel]="userSubject"  (ngModelChange)="userSubject=$event" >
          </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <textarea class="form-control" rows="6"  [ngModel]="userContent"  (ngModelChange)="userContent=$event"></textarea>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" [disabled]="!( userContent && userCCValid && userMailValid)">Send Mail
        </button>

                </div>
            </div>
        </div>
    </div>

import { Component, VERSION } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  name = "Angular " + VERSION.major;

  public subject: any = "";
  public userMail: any = "";
  public userFile: any = "";
  public userSubject: any = "";
  public userContent: any = "";
  public userContactCC: any = null;
  public userCC = "";
  userMailValid = true;
  userCCValid = true;

  onSearchChange(input): void {  
    console.log(this[input]);
    if(input == 'userContactCC') {
      this.validateEmailList(this.userCC,  'userContactCC')
    } else {
      this.validateEmailList(this.userMail, 'userMail')
    }
  }

  validateEmailList(raw, type){
    var emails = raw.split(',')

    var valid = true;
    var regex = /^(([^<>()[\]\\.,;:\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,}))$/;

    for (var i = 0; i < emails.length; i++) {
        if( emails[i] === "" || !regex.test(emails[i].replace(/\s/g, ""))){
            valid = false;
        }
        console.log("emails,", emails[i], valid)
    }
    if(type == 'userContactCC') {
      this.userCCValid = valid;
    }else {
      this.userMailValid = valid;
    }
    return valid;
} 
}