30. フォームのバリデーション — Validators

入力値が正しいかを検証するには、FormControl の第2引数に Validators を渡します。new FormControl('', [Validators.required, Validators.email]) と書くと、未入力ならエラー、メール形式でなければエラー、と判定されます。各コントロールやフォーム全体は valid / invalid というプロパティを持ち、検証結果に応じて true / false が切り替わります。

実務では、form.invalid のときに送信ボタンを [disabled] で押せなくしたり、@if (form.get('email')?.invalid) { ... } でエラーメッセージを出したりします。errors にはどの検証で失敗したかが入るので、required と email でメッセージを出し分けることもできます。

つまずきやすいのは、入力前から赤いエラーが出てしまうことです。touched(一度触れたか)や dirty(値を変えたか)と組み合わせて「触れたあとに無効ならエラーを出す」とすると自然です。下のコードは、required と email の判定ロジックをプレーンなTypeScript関数で再現したものです。

▶ サンプルコードを実行してみよう(自由に書き換えてOK)

TypeScript

// Validators の判定ロジックをプレーンTypeScriptで再現する
function isRequiredOk(input: string): boolean {
  return input.trim().length > 0;
}

function isEmailOk(input: string): boolean {
  const at = input.indexOf('@');
  const dot = input.lastIndexOf('.');
  return at > 0 && dot > at + 1 && dot < input.length - 1;
}

const inputs = ['', '  ', 'tanaka', 'tanaka@example.com'];
inputs.forEach((value) => {
  const required = isRequiredOk(value);
  const email = isEmailOk(value);
  console.log('値:', JSON.stringify(value), 'required:', required, 'email:', email);
});

公式ドキュメントで詳しく ↗