[解決済み] Angular6でパスワードの検証を確認する [重複]。

質問

を行いたい。 パスワード と パスワードの確認 バリデーションは 材料 コンポーネントのみで、エラーメッセージは パスワードの確認 フィールドの下にエラーメッセージを表示します。 confirm password field doesn't match そして if it is empty .達成することができない多くのリソースを試してみました。

試してみた この動画 も試してみました。

これは、私が探している材料コンポーネントです。

HTML

     <mat-form-field >
        <input matInput  placeholder="New password" [type]="hide ? 'password' 
          : 'text'" [formControl]="passFormControl" required>
        <mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility' : 
          'visibility_off'}}</mat-icon>
        <mat-error *ngIf="passFormControl.hasError('required')">
            Please enter your newpassword
         </mat-error>
      </mat-form-field>

      <mat-form-field >
         <input matInput  placeholder="Confirm password" [type]="hide ? 
              'password' : 'text'" [formControl]="confirmFormControl" 
                    required>
         <mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility' : 
                'visibility_off'}}</mat-icon>
         <mat-error *ngIf="confirmFormControl.hasError('required')">
          Confirm your password
          </mat-error>
      </mat-form-field>

TS

     import {Component, OnInit } from '@angular/core';
     import {FormControl, FormGroupDirective, NgForm, Validators} from 
             '@angular/forms';
     import {ErrorStateMatcher} from '@angular/material/core';

     @Component({
            selector: 'asd-set-pass',
            templateUrl: './set-pass.component.html',
             styleUrls: ['./set-pass.component.css']
         })

       passFormControl = new FormControl('', [
            Validators.required,
        ]);
        confirmFormControl = new FormControl('', [
            Validators.required,
            ]);

             hide =true;

       }

以下の条件では正常に検証できています。 1)パスワードと確認用パスワードの欄が空の場合、エラーメッセージが表示されます。

(.ts)ファイルのフィールドと比較したいのですが、空のフィールドは検証され、パスワードの確認フィールドが空の場合はエラーになります。

どのように解決するのですか？

この質問は、次の2つの回答の組み合わせで解決できるかもしれません。 https://stackoverflow.com/a/43493648/6294072 と https://stackoverflow.com/a/47670892/6294072

まず最初に、パスワードをチェックするためのカスタムバリデータが必要で、次のようになります。

checkPasswords: ValidatorFn = (group: AbstractControl):  ValidationErrors | null => { 
  let pass = group.get('password').value;
  let confirmPass = group.get('confirmPassword').value
  return pass === confirmPass ? null : { notSame: true }
}

で、2つのフォームコントロールではなく、フィールド用のフォームグループを作成し、フォームグループ用のカスタムバリデータをマークします。

this.myForm = this.fb.group({
  password: ['', [Validators.required]],
  confirmPassword: ['']
}, { validators: this.checkPasswords })

で、他の回答にもあるように mat-error がある場合のみ表示されます。 フォームコントロール が無効な場合にのみ表示されるので、エラー状態のマッチャーが必要です。

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

    return invalidCtrl || invalidParent;
  }
}

の中で、エラーメッセージを表示するタイミングを調整することができます。私なら、エラーメッセージを表示するのは password フィールドがタッチされたときのみメッセージを表示します。また、上記のように required バリデーターを confirmPassword フィールドにあるバリデータを使います。

次にコンポーネントで、新しい ErrorStateMatcher :

matcher = new MyErrorStateMatcher();

最後に、テンプレートは次のようになります。

<form [formGroup]="myForm">
  <mat-form-field>
    <input matInput placeholder="New password" formControlName="password" required>
    <mat-error *ngIf="myForm.hasError('required', 'password')">
      Please enter your new password
    </mat-error>
  </mat-form-field>

  <mat-form-field>
    <input matInput placeholder="Confirm password" formControlName="confirmPassword" [errorStateMatcher]="matcher">
    <mat-error *ngIf="myForm.hasError('notSame')">
      Passwords do not match
    </mat-error>  
  </mat-form-field>
</form>

上記のコードを使ったデモを紹介します。 StackBlitz