如何在 Angular 4 中以反应形式验证多个电子邮件地址

Question

我需要输入 50 个具有相同域名 (gmail.com) 的电子邮件地址。

我使用的是响应式表单。我添加了一些我编写的代码，它对我不起作用。

https://stackblitz.com/edit/angular-wfwfow

谁能帮我解决这个问题？

emailPattern = "[a-zA-Z0-9_.+-,;]+@(?:(?:[a-zA-Z0-9-]+\.,;)?[a-zA-Z]+\.,;)?(gmail)\.com";

 ngOnInit() {
        this.accountingForm = this.fb.group({
            'day' : [null, Validators.required], 
            'email': ['',
                Validators.compose([
                    Validators.required,Validators.pattern(this.emailPattern),this.commaSepEmail
                ])
            ]
        });
    }
    commaSepEmail = (control: AbstractControl): { [key: string]: any } | null => {
        console.log("This is value:" + control.value);
        if (!_.isEmpty(control.value)){
            var emails= control.value.split(',');
            const forbidden = emails.some((email:any) => Validators.email(new FormControl(email)));
        console.log(forbidden);
        return forbidden ? { 'email': { value: control.value.trim() } } : null;
        }
    };

 <form [formGroup]="accountingForm" (ngSubmit)="generateSOR(accountingForm.value)">
    <input formControlName="email" [pattern]="emailPattern" placeholder="Email Address">
    <button type="submit" mat-raised-button class="mat-primary" [disabled]="!accountingForm.valid">Generate</button>
    </form>

Answer 1

这将验证逗号分隔的列表之间没有空格。最后一个逗号就可以了。示例：joe@email.co,jiffy@coke.peas。这与joe@email.co,jiffy@coke.peas, 相同。注意最后的逗号没有区别。也没有空间。

 sendEmailForm: FormGroup;

  emailList: string [];

  ngOnInit(): void {
    this.emailList = [];
    const toAddress = new FormControl('', [
      Validators.required,
      Validators.pattern(/^([\w+-.%]+@[\w-.]+\.[A-Za-z]{2,4},?)+$/)
    ]);

    this.sendEmailForm = new FormGroup({
      toAddress: toAddress
    });
  }
  extractEmailList(e){
    this.emailList = [];
    if(this.sendEmailForm.valid) {     
      let emails = e.split(',');
      emails.forEach(email => {
        if(email && email.length > 0) {
          this.emailList.push(email);
        }
      });
    }
    console.log(this.emailList);
  }

在视图中，您可以添加如下验证。

<form [formGroup]="sendEmailForm" (ngSubmit)="onSubmit($event)">
    <div class="form-group required">
      <span class="label label-primary">Email(s):</span>
      <input
      (ngModelChange)="extractEmailList($event)"
        type="text"
        [formControl]="sendEmailForm.controls['toAddress']"            
        value=""
        maxlength="150"
        name="toAddress"
        class="form-control"
      />
    </div>
    <small
    *ngIf="sendEmailForm.controls['toAddress'].hasError('required') && sendEmailForm.controls['toAddress'].touched"
    class="form-error-msg">
    Valid email is required to send an invitation.
  </small>
    <small
    *ngIf="sendEmailForm.controls['toAddress'].hasError('pattern') && sendEmailForm.controls['toAddress'].touched"
    class="form-error-msg">
    Please enter comma separated list of valid email addresses without spaces in between. No comma is required after last email.
  </small>
      <button type="submit" [disabled]="!sendEmailForm.valid" class="btn btn-primary btn-simple" >Invite</button>
      <small class="form-error-msg">{{emailList.length}} email(s) will be sent.</small>
  </form>

在您的 onSubmit() 方法中，您可以从 emailList 中获取值。无需从表单中获取。

Answer 2

我相信我发现了您在未启用按钮时遇到的问题。如果你改变你的emailPattern

从字符串格式

emailPattern = "[a-zA-Z0-9_.+-,;]+@(?:(?:[a-zA-Z0-9-]+\.,;)?[a-zA-Z]+\.,;)?(gmail)\.com";

转正则格式

emailPattern = /[a-zA-Z0-9_.+-,;]+@(?:(?:[a-zA-Z0-9-]+\.,;)?[a-zA-Z]+\.,;)?(gmail)\.com/;

我相信它会起作用。根据我的测试，您可能希望微调正则表达式以更好地实现预期结果，但这解决了按钮未启用的问题。

我通常更喜欢尽可能使用正则表达式而不是字符串。它也更具可读性。