防止为两个字段输入相同的值 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。

祝你好运！

Answer 2

这应该可以帮助您弄清楚...

基本上，由于您没有提供按钮，我假设您想检查输入更改时两个密码是否相等。

所以，我在HTML 输入中插入了(change) 事件（有关(change) 事件的更多信息：https://developer.mozilla.org/en-US/docs/Web/Events/change）。

考虑到这一点，我创建了一条在输入相同时显示的错误消息。

接下来，我创建了一些 Javascript 函数来验证输入字段和返回错误消息的消息。

希望我能帮上忙！玩得开心！

HTML

<div class="row">
  <div class="col-12">
    <input type="text" required [(ngModel)]="passwordModel.oldPassword" 
name="oldPassword" #oldPassword class="form-control" id="inputPassword" 
placeholder="Current Password" (change)="checkOldPassword(oldPassword.value)">
  </div>
</div>

<div class="row">
  <div class="col-12">
    <input type="text" required class="form-control" id="newinputPassword" 
[(ngModel)]="passwordModel.newPassword" name="newPassword" #newPassword
placeholder="New Password" (change)="checkNewPassword(newPassword.value)">
  </div>
</div>

<div class="row">
  <div class="col-12" *ngIf="isNewPasswordInvalid">
    <small>{{getErrorMessage()}}</small>
  </div>
</div>

Javascript

isNewPasswordInvalid: boolean = false;
message: string = "The new password can't be the same as the old password!";

function checkOldPassword(value){
  if(value === this.passwordModel.newPassword){
    this.inputInvalid();
  } else {
    this.inputValid();
  }
}

function checkNewPassword(value){
  if(value === this.passwordModel.oldPassword){
    this.inputInvalid();
  } else {
    this.inputValid();
  }
}

function inputInvalid(){
  document.getElementById('newinputPassword').style['border-color'] = 'red';
  this.isNewPasswordInvalid= true;
}

function inputValid(){
  document.getElementById('newinputPassword').style['border-color'] = '';
  this.isNewPasswordInvalid= false;
}

function getErrorMessage(){
  return this.message;
}

编辑：如果您需要一个按钮，@Andrew Radulescu 的回答会解决问题。祝你好运！