запретить ввод одинакового значения для двух угловых полей 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>

Вы также можете использовать Пользовательские валидаторы , чтобы сделать элемент управления зависимым от других.Посмотрите здесь .

Удачи!

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;
}

РЕДАКТИРОВАТЬ: Если вам нужна кнопка, @Ответ Эндрю Радулеску сделает свое дело. Удачи!