Question

我使用Angular创建了一个动态表单，允许用户输入电子邮件地址。在上一个字段完成之前，不应允许用户添加另一个空字段。目前我的代码正确验证了第一个字段，但是如果第二个，第三个字段等是空白的话会添加一个新字段，即使它仍然会触发错误提示。

这是HTML：

<ion-item id="row" *ngFor="let emailinput of emailinputs ; let i = index">
  <ion-label fixed id="label">
    Email
  </ion-label>
  <ion-input type="email" id="email" placeholder="jdoe@gmail.com" [(ngModel)]="emailinputs[i].email"></ion-input>
</ion-item>

<div padding>
  <button (click) = "addnewemail(emailinputs)" ion-button full color="nudgetprim" block>Add</button>
  <button (click) = "sendinvite(emailinputs.email)" ion-button full color="nudgetprim" block>Invite</button>
</div>

这是TS：

addnewemail() {
  console.log(this.emailinputs)
  for(var a in this.emailinputs){
    if (this.emailinputs[a].email==null || this.emailinputs[a].email=="" || !this.emailinputs[a].email.includes("@") || !this.emailinputs[a].email.includes("."))
    {
      let alert = this.alerCtrl.create({
        title: 'Error!',
        message: 'There was an error with an email address you entered.',
        buttons: ['Ok']
      });
      alert.present()
    }
    else {
      var newItem = this.emailinputs.length;
      this.emailinputs.push({'id' : 'row' + newItem, 'name' : 'row' + newItem, 'email': ''});
    }
  }
}

我如何才能为每一个输入而不仅仅是第一个输入？

Answer 1

您现在正在迭代整个数组，这意味着，如果代码命中数组中实际具有值的项，它将在数组中添加一个新项。您要检查的是，数组中的最后一项没有空（或无效）电子邮件值：

addnewemail() {
  // get last item!
  let item = this.emailinputs[this.emailinputs.length-1];
    if (item.email == null || 
        item.email == "" || 
        !item.email.includes("@") || 
        !item.email.includes(".")) {
      // alert
    }
    else {
      // add new item
    } 
}

<强> StackBlitz

您还可以尝试使用实际的电子邮件验证，最好使用Validators.email制作一个反应式表单（如评论中建议的那样）。

验证仅适用于循环的第一个输入字段

1 个答案: