【问题标题】:error not display although old password and new password are same?尽管旧密码和新密码相同,但不显示错误?
【发布时间】:2020-04-28 14:47:09
【问题描述】:

我在 Angular 7 上工作

我比较旧密码和新密码

如果两者相同,则必须显示错误

但在我的情况下,旧密码和新密码相同,但错误不显示

为什么不显示错误以及如何解决这个问题?

函数CompareOldWithNew在新旧值相同但不显示错误时返回false

更改密码.ts

 oldPassword = new FormControl('', [Validators.required, Validators.minLength(6), Validators.maxLength(10)]);
 newPass = new FormControl('', [Validators.required, Validators.minLength(6), Validators.maxLength(10),this.CompareOldWithNew("oldPassword")]);
  ngOnInit() {
    this.createFormResetPassword();
  }
  get c() { return this.ChangePasswordForm.controls; }

CompareOldWithNew(field_name): ValidatorFn {

    return (control: AbstractControl): { [key: string]: any } => {

      const input = control.value;
      const isnotequalValues = control.root.value[field_name] != input;
      return  isnotequalValues ? null :{'old password must not match New': {isnotequalValues}} ;

    };
  }
  createFormResetPassword() {
    this.ChangePasswordForm = this.formBuilder.group({
 oldPassword: this.oldPassword,
      newPass: this.newPass
})
}
onSubmit() {

    if (this.ChangePasswordForm.invalid) {
        return;
    }

changpaassword.html

<div class="form-group">
  <label >OldPassword</label><br>
  <input type="password" formControlName="oldPassword" class="textboxclass"   [ngClass]="{ 'is-invalid': submitted && c.oldPassword.errors }" />
  <div *ngIf="submitted && c.oldPassword.errors" class="invalid-feedback">
      <div *ngIf="c.oldPassword.errors.required">Password is required</div>
      <div *ngIf="c.oldPassword.errors.minlength">Password must be at least 6 characters</div>
  </div>
</div>

<div class="form-group">
  <label>New Password</label><br>
  <input type="password" formControlName="newPass" class="textboxclass"    [ngClass]="{ 'is-invalid': submitted && c.newPass.errors }" />
  <div *ngIf="submitted && c.newPass.errors" class="invalid-feedback">
      <div *ngIf="c.newPass.errors.required">Password is required</div>
      <div *ngIf="c.newPass.errors.minlength">Password must be at least 6 characters</div>
      <div *ngIf="c.newPass.errors.CompareOldWithNew">old password not match new </div>
  </div>
</div>

【问题讨论】:

  • 您尝试过...返回 isnotequalValues === true 吗? '旧密码不能匹配新密码' : isnotequalValues;
  • 如果可能的话,你能解释更多细节吗
  • 我的意思是在您的 CompareOldWithNew 方法中,用我的替换您的 return 语句。你试过了吗?
  • 你应该返回 true

标签: typescript angular7 angular-reactive-forms angular-validation angular-validator


【解决方案1】:

这将检查不相等的输入

new FormControl('', notEqual('xxx'))

验证器

import { AbstractControl, Validators, ValidatorFn } from '@angular/forms';

import { isPresent } from '../util/lang';

export const notEqual = (val: any): ValidatorFn => {
  return (control: AbstractControl): {[key: string]: boolean} => {
    if (isPresent(Validators.required(control))) return null;

    let v: any = control.value;

    return val !== v ? null : {notEqual: true};
  };
};

【讨论】:

    猜你喜欢
    • 2013-11-22
    • 1970-01-01
    • 2012-01-07
    • 2013-03-29
    • 1970-01-01
    • 1970-01-01
    • 2016-02-17
    • 1970-01-01
    • 2023-03-25
    相关资源
    最近更新 更多