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

这应该可以帮助您解决...

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

因此，我在(change)输入中插入了HTML事件（有关(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的答案将助您一臂之力。祝你好运！

防止为角度为6的两个字段输入相同的值

2 个答案: