javascript - 防止为两个字段输入相同的值 Angular 6

Question

我需要防止为两个不同的文本框输入相同的值

这是我的代码。

<input type="text"  required [(ngModel)]="passwordModel.oldPassword" name="oldPassword" #oldPassword="ngModel" class="form-control" id="inputPassword" placeholder="Current Password">

<input type="text" (keydown)='ngModelChange()' required class="form-control" id="newinputPassword" [(ngModel)]="passwordModel.newPassword" name="newPassword" #newPassword="ngModel" placeholder="New Password">

功能

checkModelVal() {
  this.oldPw = this.passwordModel.oldPassword,
  this.newPw = this.passwordModel.newPassword;
  if (this.oldPw === this.newPw ) {
    console.log('new and old password can not be same');
  }
}

上面的代码可能不是我的要求的糟糕解决方案。如果您知道更好的解决方案，请在答案中提及。谢谢

Answer 1

我相信您希望在密码相同时显示某种错误并禁用提交按钮。您不需要每次值更改时都调用该函数，因为模型是通过ngModel更新的，并且您始终拥有它们:

你的功能还不错，但可以简化为:

checkModelVal() {
   return this.passwordModel.oldPassword !== this.passwordModel.newPassword;
}

使用此函数您可以处理错误消息，可能如下所示:

 <span *ngIf="!checkModelVal()">Passwords should be different</span>

并禁用您的提交按钮

  <button [disabled]="!checkModelVal()">Submit</button>

您还可以使用自定义验证器来使控件依赖于其他控件。看看here 。

祝你好运!