Question

在我的角度应用程序中，我有一个包含两个输入字段的表单：

发送电子邮件并确认电子邮件。

<label for="exampleInputEmail1">New Email</label>
<input type="email" class="form-control">
<label for="exampleInputEmail1">Confirm </label>
<input type="email" class="form-control">

是否有可能，当用户在第二个字段上键入时，一旦他离开字段而没有单击提交按钮来检查这两个字段是否相同然后应用带有样式的自定义类？

是否在ngModel上完成了更改？通常如何检查？

我是棱角分明的新人，所以感谢任何帮助，

由于

Answer 1

如果您想在用户输入时进行检查，可以使用以下内容：

<input class="form-control" [ngModel]="confirmEmail" (ngModelChange)="checkEmail($event)"/>

并检查方法中两个字段是否匹配，其中$event将是输入字段的值。

你也可以模糊：

<input class="form-control" [(ngModel)]="confirmEmail" (blur)="checkEmail(confirmEmail)"/>

在这里，您可以使用[(ngModel)]="confirmEmail"获取字段的值，并查看它是否与方法中的上一个字段匹配。

Answer 2

checkSame(secEmail: string) {
  this.secondEmail = secEmail;
  if (this.secondEmail === this.firstEmail) {
    // stuff for form control
  } else {
    // form control with errors
  }
}

<label for="exampleInputEmail1">New Email</label>
<input type="email" name="firstEmail" [(ngModel)]="firstEmail" class="form-control">
<label for="exampleInputEmail1">Confirm </label>
<input type="email" name="secondEmail" [ngModel]="secondEmail" class="form-control" (ngModelChange)="checkSame($event)">

这将仅在第二封电子邮件更改时验证电子邮件匹配。如果您还要检查第一个更改的第一个，请使用与第二个输入字段相同的ngModelChange。

角度检查两个输入字段是否相同而不点击提交

2 个答案: