Question

因此，我创建了一个自定义验证器，以验证“新密码”字段和“确认密码”字段是否匹配。在组件级别，它很棒。仅当两个输入不匹配时，才会显示错误消息。

问题是，我禁用了提交按钮，直到表单有效为止，但是当我使用此自定义验证程序时，整个表单永远不会通过验证。填写for表单时，所有组件验证都会通过，但表单验证不会通过。

我在这里想念什么？

自定义验证程序代码如下：

import {FormGroup, ValidationErrors, ValidatorFn} from "@angular/forms";

export const matchingInputsValidator: ValidatorFn = (control: FormGroup): ValidationErrors | null => {
  let pass = control.get('NewPassword').value;
  let confirmPass = control.get('ConfirmPassword').value;
  return pass === confirmPass ? { matchingInputs: true } : { matchingInputs: false };
};

我将自定义验证器导入到我的组件中，并在组件中声明我的表单控件，如下所示：

expiredPasswordForm: FormGroup;
oldPassword = new FormControl('', Validators.compose([Validators.required, Validators.minLength(4)]));
newPassword = new FormControl('', Validators.compose([Validators.required, Validators.minLength(4)]));
confirmPassword = new FormControl('', Validators.compose([Validators.required, Validators.minLength(4)]));

在我的ngOnInit（）生命周期挂钩中，我像这样创建表单组：

this.expiredPasswordForm = this.fb.group({
      'OldPassword': this.oldPassword,
      'NewPassword': this.newPassword,
      'ConfirmPassword': this.confirmPassword
    }, { validator: matchingInputsValidator});

表单的HTML如下：

<form [formGroup]="expiredPasswordForm" ngNoForm action="" method="post" class="form-horizontal">

        <label for="oldPassword" class="col-sm-4 col-md-6 col-lg-6 col-xl-6 control-label" translate>Old Password</label>
        <input [formControl]="oldPassword" type="password" class="form-control" id="oldPassword"
               placeholder="Old Password" name="OldPassword" [ngClass]="{'is-invalid':oldPassword.invalid && (oldPassword.dirty || oldPassword.touched)}">
        <div *ngIf="oldPassword.invalid && (oldPassword.dirty || oldPassword.touched)" class="invalid-feedback">
          <span *ngIf="oldPassword.errors.required">Old Password is required</span>
        </div>

        <label for="newPassword" class="col-sm-4 col-md-6 col-lg-6 col-xl-6 control-label mt-2" translate>New Password</label>
        <input [formControl]="newPassword" type="password" class="form-control" id="newPassword"
               placeholder="New Password" name="NewPassword" [ngClass]="{'is-invalid':newPassword.invalid && (newPassword.dirty || newPassword.touched)}">
        <div *ngIf="newPassword.invalid && (newPassword.dirty || newPassword.touched)" class="invalid-feedback">
          <span *ngIf="newPassword.errors.required">A new password is required</span>
        </div>

        <label for="confirmPassword" class="col-sm-4 col-md-6 col-lg-6 col-xl-6 control-label mt-2" translate>Confirm Password</label>
        <input [formControl]="confirmPassword" type="password" class="form-control" id="confirmPassword"
               placeholder="Confirm Password" name="ConfirmPassword" [ngClass]="{'is-invalid':confirmPassword.invalid && (confirmPassword.dirty || confirmPassword.touched)}">
        <div *ngIf="confirmPassword.invalid && (confirmPassword.dirty || confirmPassword.touched)" class="invalid-feedback">
          <span *ngIf="confirmPassword.errors.required">You must confirm your new password!</span>
        </div>
        <div *ngIf="!expiredPasswordForm.errors?.matchingInputs">
          <span class="form-error-message">Passwords do not match!</span>
        </div>

        <div class="text-center">
          <button [disabled]="!expiredPasswordForm.valid" type="submit" class="btn btn-primary mt-4 mb-2">Update Password</button>
        </div>

      </form>

我希望这是足够的信息。为什么这在组件级别而不在表单级别有效？预先谢谢你！

Answer 1

问题出在您的自定义验证器上。

您可能已经弄清楚了，因为它是设置在FormGroup级别而不是FormControl级别的唯一验证器

验证器返回的对象的类型为ValidationErrors，它是包含键/值对的对象。对于每对，键代表错误的名称，值代表关联的数据（例如显示的详细信息）。

因此，如果您希望验证程序不返回任何错误，则完全不返回任何内容：

import {FormGroup, ValidationErrors, ValidatorFn} from "@angular/forms";

export const matchingInputsValidator: ValidatorFn = (control: FormGroup): ValidationErrors | null => {
   let pass = control.get('NewPassword').value;
   let confirmPass = control.get('ConfirmPassword').value;
   return pass === confirmPass ? null : { matchingInputs: false };
}

Angular 6反应形式验证不适用于自定义验证器

1 个答案: