Angularでリアルタイムバリデーションを実装する
前置き
クライアント側での単項目チェックによく使われる「リアルタイムバリデーション」をAngularで実装するためのTIPSです。
実装手順
フォームグループを作る
* FormBuilder や FormGroup を使ってコントロールをまとめる
form = this.fb.group({
username: ['', []],
email: ['', []]
});
バリデーションを設定する
* 各コントロールに Validators を追加
* 非同期バリデーション（サーバー照会）を使うなら asyncValidators に設定
form = this.fb.group({
username: ['', [Validators.required, Validators.minLength(3)]],
email: ['', [Validators.required, Validators.email]]
});
HTMLにフォームを描く