Question

我无法获取匹配项来触发任何形式的表单验证。现在，即使密码不同，也不会显示密码不匹配。这可能是任何原因。我提供了demo和简单的代码作为您的参考。希望大家能帮助我解决我的问题。

HTML

<div class="container">
  <form [formGroup]="changePasswordForm" #userForm="ngForm" (ngSubmit)="changepwd(userForm)">
    <h2 mat-dialog-title class="dialog-form-title" class="dialog-form-title">CHANGE PASSWORD</h2>
    <div mat-dialog-content col-md-12>
      <mat-error *ngIf="changePasswordForm.hasError('notSame')">
        Passwords do not match
      </mat-error>
      <mat-error *ngIf="errorMessage" class="ctrl-msg">
        {{errorMessage}}
      </mat-error>
      <div class="row">
        <div class="col-md-12">
          <div class="form-group">
            <label for="CurrentPassword">Current Password</label>
            <input matInput type="password" class="form-control" formControlName="currentPassword" >
          </div>

          <div class="form-group">
            <label for="newPassword">New Password</label>
            <input matInput type="password" class="form-control" formControlName="newPassword" minlength="5">
          </div>
          <div class="form-group">
            <label for="verifyPassword">Repeat Password</label>
            <input matInput type="password" class="form-control" formControlName="verifyPassword" inlength="5">
          </div>
        </div>
      </div>
      <div class="row">
          <div class="col-md-12">
        <div mat-dialog-actions class="dialog-form-footer text-center">

            <div class="clearfix"><button mat-flat-button class="chg-button">Change</button></div>

          </div>
        </div>
      </div>
    </div>

  </form>
</div>

组件

ngOnInit() {
      this.createForm();
    }

  createForm() {
   this.changePasswordForm = this.formBuilder.group({
    newPassword: ["", [Validators.required, Validators.minLength(5)]],
    verifyPassword: ["", [Validators.required]]
    }, {
      validator:this.passwordValidator
    });
}

passwordValidator(form: FormGroup) {
  const condition = form.get('password').value !== form.get('confirmPassword').value;

  return condition ? { passwordsDoNotMatch: true} : null;
}

getErrorPassword() {
  console.log(this.changePasswordForm.get('newPassword').hasError('minLength'))
  return this.changePasswordForm.get('newPassword').hasError('required') ? 'Field is required' :
  this.changePasswordForm.get('newPassword').hasError('minLength') ? 'Password needs to be at least 5' : '';
}

getErrorConfirm(){
  return  this.changePasswordForm.get('verifyPassword').hasError('required') ? 'Field is required': '';
}

onSubmit(post) {
      console.log(post)
}

Answer 1

在您的自定义验证器中，您为密码不匹配分配了passwordsDoNotMatch对象，并且您尝试访问模板上的“ notSame”

尝试一下：

<mat-error *ngIf="changePasswordForm.hasError('passwordsDoNotMatch')">
        Passwords do not match
 </mat-error>

Forked Example

Answer 2

您好为您的匹配器添加一个导出类

export class MyErrorStateMatcher implements ErrorStateMatcher {
      isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
        const invalidCtrl = !!(control && control.invalid && control.parent.dirty);
        const invalidParent = !!(control && control.parent && control.parent.invalid && control.parent.dirty);

        return (invalidCtrl || invalidParent);
      }
    }

将其添加到构造器中

 this.changePasswordForm = this.formBuilder.group({
      newPassword: ['', [Validators.required,Validators.minLength(5)]],
      verifyPassword: ['']
    }, { validator: this.checkPasswords });

这是密码检查或检查器功能，告诉您密码是否为密码

checkPasswords(group: FormGroup) { // here we have the 'passwords' group
    let pass = group.controls.newPassword.value;
    let confirmPass = group.controls.verifyPassword.value;

    return pass === confirmPass ? null : { notSame: true }
  }

演示，您可以在此处找到您更新的密码代码，并仅确认密码匹配器

https://stackblitz.com/edit/mat-dialog-example-g8zsa7

密码验证无法正常工作

2 个答案: