web-dev-qa-db-ja.com

Angular 6リアクティブフォーム検証がカスタムバリデーターで機能しない

そこで、「新しいパスワード」フィールドと「パスワードの確認」フィールドが一致することを検証するカスタムバリデーターを作成しました。コンポーネントレベルでは、うまく機能します。エラーメッセージは、2つの入力が一致しない場合にのみ表示されます。

問題は、フォームが有効になるまで送信ボタンを無効にすることですが、このカスタムバリデーターを使用すると、フォーム全体が検証に合格しません。 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>

これで十分な情報になるといいのですが。これがコンポーネントレベルで機能するのに、フォームレベルでは機能しないのはなぜですか？前もって感謝します！

javascripthtmlangularangular-reactive-formsangular2-form-validation
2
Mr Shantastic

問題はカスタムバリデーターにあります。

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