成功验证后垫输入仍然无效 - Angular 12

Question

组件代码-

    ngOnInit(): void {
        this.form = this.fb.group({
          currentPassword: ['', [Validators.required], [this.matchCurrentPassword]],
          newPassword: ['', [Validators.required, Validators.minLength(6), Validators.maxLength(12)]],
          confirmPassword: ['', [Validators.required]]
        }
          , { validator: this.ConfirmedValidator('newPassword', 'confirmPassword') }
        )
      }
    matchCurrentPassword = (
        control: AbstractControl
      ): Observable<ValidationErrors | ValidationErrors> => {
        return this.userService.matchCurrentPassword(localStorage.getItem("userId"), control.value)
          .pipe
          (tap(x => { console.log("response:", x) }),
            (map((x: any) => { return x.isExecute ? { matches: true } : { matches: false }; }))
          )
      }
ConfirmedValidator(controlName: string, matchingControlName: string) {
    return (formGroup: FormGroup) => {
      const control = formGroup.controls[controlName];
      const matchingControl = formGroup.controls[matchingControlName];
      if (matchingControl.errors && !matchingControl.errors.confirmedValidator) {
        return;
      }
      if (control.value !== matchingControl.value) {
        matchingControl.setErrors({ confirmedValidator: true });
      } else {
        matchingControl.setErrors(null);
      }
    }
  }

Html代码-

 <mat-form-field appearance="outline" fxFlex="1 1 calc(100% - 10px)"fxFlex.lt-md="1 1 calc(100% - 10px)" fxFlex.lt-sm="100%" fxFlex.xs="100%" class="from-color">
    <mat-label class="label-padding">Enter Current Password</mat-label>
     <input type="password" class="label-padding" type="text" style="-webkit-text-security: disc;"matInput placeholder="Current Password" formControlName="currentPassword" />
   <mat-error *ngIf="currentPassword.errors?.required && currentPassword.touched">Enter current password</mat-error>
  <mat-error *ngIf="currentPassword.errors?.matches==false">Doesn't match</mat-error>
 </mat-form-field>

匹配当前密码 的验证工作完美并根据条件显示错误消息。但它的输入字段在那之后仍然无效。

我还尝试验证其余的输入字段。但是 currentPassword 仍然无效并且导致 整个表格 仍然 invalid.

为什么会发生这种情况以及如何解决这个问题？有人知道吗？

Answer 1

根据Defining custom validators，

That function takes an Angular control object and returns either null if the control value is valid or a validation error object.

如果验证有效，您需要 return null matchCurrentPassword 函数.

解决方案

和return{ matches: true }在matchCurrentPassword函数中验证失败时

.component.ts

matchCurrentPassword = (
  control: AbstractControl
): Observable<ValidationErrors | null> => {
  let userId = localStorage.getItem('userId');
  return this.userService.matchCurrentPassword(userId, control.value).pipe(
    tap(x => {
      console.log('response:', x);
    }),
    map((x: any) => {
      return x.isExecute ? null : { matches: true };
    })
  );
};

.component.html

<mat-error *ngIf="currentPassword.errors?.matches">Doesn't match</mat-error>

Sample Solution on StackBlitz

成功验证后垫输入仍然无效 - Angular 12

mat-input still remains invalid after successful validation - Angular 12

validation

angular

angular-reactive-forms

mat-input

mat-error

解决方案