【 Angular 】SetErrorsで指定したバリデーションを取り除く方法

Angularのフォームバリデーションには、独自のバリデーションを設定することができるsetErrors()メゾットがあります。そのsetErrors()メゾットで指定したバリデーションを無効にする方法でハマってしまったので、記事にしておきたいと思います。

Angularではフォームに入力した値が正しいものであるか確認するために、バリデーション機能が用意されています。このバリデーションを使用して「入力必須」や「半角英数字のみ入力可」といった条件を指定することができます。

SetErrors()メゾットは、既存のバリデーションとは別に、自分でカスタマイズしたバリデーションを作ることが出来ます。

 ■ 構文

setErrors( errors: ValidationErrors, opts: { emitEvent?: boolean; } = {} ): void

具体的な記述方法は以下の通りとなります。
ユーザーネームとパスワードが同じ値であった際にバリデーションをセットしたい場合、メゾットにsetError()を組み込みます。

sameValueErrors (): boolean {
    if (this.form.contorls.username.value === this.form.controls.password.value)
        this.form.controls.username.setError({ 'firstError': true })
}

<mat-form-field formName="username">
  <lagel>username</lagel>
  <mat-input plaseholder="username"></mat-input>
  <mat-error *ngIf="sameValueErrors()">ユーザー名とパスワードは異なる値を入力して下さい。<mat-error>
</mat-form-field>
<mat-form-field formName="password">
  <lagel>password</lagel>
  <mat-input plaseholder="password"></mat-input>
</mat-form-field>

これで、ユーザー名とパスワードを同じ値を入力した場合は、作成したfirstErrorがtrueとなりバリデーションエラーが表示される様になります。

setErrorメゾットを取り除く

ユーザー名とパスワードが同じ値でない場合に、バリデーションが走らないようにするにはfirstErrorをnullに設定します。
また、バリデーションをメゾットなどで追加、削除する場合に値を監視するupdateValueAndValidity()メゾットも設定します。

setErrors (): boolean {
    if (this.form.contorls.username.value === this.form.controls.password.value)
    　　this.form.controls.username.setError({ 'firstError': true })
    else if (this.form.contorls.username.value !== this.form.controls.password.value) {
     　　this.form.controls.username.setError({ 'firstError': null });
           this.form.controls.username.updateValueAndValidity();
    }
}

これで正常にバリデーションを解除することができます。当初、setError{ null }に設定していましたが、この場合、他のバリデーションも全て取り除かれてしまうため、意図した挙動にはなりませんでした。

参考文献