はじめに

Angular でフォームを使う時に対象のフォームが valid か invalid かということを気にすることは日常茶飯事である。これらは FormControl のステータスとして管理されているが、実は valid と invalid の他にあと 2 つの状態がある。

昔からある API なので、いまさら感はあるが少しハマったので備忘録として残す。

4 つの FormControlStatus とハマりどころ

まず 4 つの状態だが、ドキュメントの通り 'VALID' | 'INVALID' | 'PENDING' | 'DISABLED' である。これだけ見ればシンプルである。

FormControlStatus • Angular 日本語版

アプリケーション内で対象のフォームが valid かどうかを調べるときには valid() を使うことが多いのではないだろうか。 valid() の返り値は boolean であるため、valid なら true が返る。しかし、ハマりどころとして false のときに invalid とは限らないという点がある。

上に書いたように状態は 4 つ存在する。valid() はあくまで form.status === 'VALID' かを返しているだけなので 'PENDING' や 'DISABLED' でも false になる。

あまり複雑なフォームでなければ問題になることは少ないと思うが、条件によって readonly の表示をするといった要件がある場合は 'DISABLED' の状態を取ったりもするので「valid であることを確かめたい」のか「invalid でないことを確かめたい」のか正しく把握する必要がある。