カスタムコントロールのバリデーション
カスタムコントロールからバリデーターを提供します
「カスタムコントロールのバリデーション」はCoddyKit上の無料Angular Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。
自己検証するコントロール
カスタムコントロールは、Validator インターフェースを実装し、NG_VALIDATORS に登録することで独自のバリデーションロジックを持てます。これにより、利用側は追加設定なしで有効性を取得できます。
Validator インターフェース
Validator では、ValidationErrors（エラーマップ）を返す validate メソッドが必要です。有効な場合は null を返します。
import { Validator, ValidationErrors, AbstractControl } from '@angular/forms';
export class RatingComponent implements Validator {
validate(control: AbstractControl): ValidationErrors | null {
return control.value > 0 ? null : { required: true };
}
}NG_VALIDATORS の登録
NG_VALUE_ACCESSOR と同様に、forwardRef を使って NG_VALIDATORS 用の 2 つ目のマルチプロバイダーを追加します。
import { NG_VALIDATORS } from '@angular/forms';
providers: [
{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => RatingComponent), multi: true },
{ provide: NG_VALIDATORS, useExisting: forwardRef(() => RatingComponent), multi: true }
]エラーマップの返却
エラーマップのキーは control.errors のエントリになります。テンプレートで具体的なメッセージを表示できるよう、分かりやすいキーと必要に応じたペイロードを使用してください。
validate(control: AbstractControl): ValidationErrors | null {
const v = control.value;
if (v == null) return { required: true };
if (v < this.min) return { min: { required: this.min, actual: v } };
return null;
}エラーの利用
テンプレートでは組み込みバリデーターの場合と同じように control.errors を読み取り、コントロールが無効かつ touched のときにメッセージを表示します。
<small *ngIf="form.controls.stars.errors?.['required']">Pick a rating</small>外部バリデーターとの組み合わせ
コントロール内のバリデーターと、利用側がリアクティブフォームで指定したバリデーターは、どちらも実行されて結果が統合されます。コントロールのルールはフォームのルールを置き換えるのではなく、追加します。
stars: [0, [Validators.required]] // plus the control's own validate()動的なバリデーション
バリデーションが変更される入力値に依存する場合は、登録済みの変更コールバックを呼び出し、Angular にバリデーションを再実行するよう伝えます。
private onValidatorChange: () => void = () => {};
registerOnValidatorChange(fn: () => void) { this.onValidatorChange = fn; }
@Input() set min(v: number) { this._min = v; this.onValidatorChange(); }非同期バリデーション
サーバーでのチェックには、エラーの Observable または Promise を返す validate を持つ AsyncValidator を実装し、NG_ASYNC_VALIDATORS に登録します。
validate(control: AbstractControl): Observable<ValidationErrors | null> {
return this.api.isUnique(control.value).pipe(
map(ok => ok ? null : { taken: true })
);
}役割を絞る
コントロール固有のバリデーションだけをコントロール内に置きます（たとえば、評価値は 0 より大きくする必要があります）。再利用性を保つため、ビジネス固有のルールは利用側のフォームに任せてください。
バリデーションのテスト
値を持つモックのコントロールを渡し、返されたエラーマップまたは null を検証することで、validate を直接ユニットテストします。
it('requires a rating', () => {
const c = new FormControl(0);
expect(component.validate(c)).toEqual({ required: true });
});完全なカスタムコントロール
値アクセサー、無効状態、touched 状態、バリデーションをすべて実装すると、利用側からはネイティブ入力要素と区別できない、完全で再利用可能なフォームコントロールになります。
クイックチェック
バリデーションに関する知識を確認しましょう。
まとめ
Validator.validate を実装してバリデーションを追加し、NG_VALIDATORS に登録してエラーマップを返しました。また、registerOnValidatorChange による動的な再バリデーションに対応し、完全に統合されたカスタムコントロールのために、必要に応じて NG_ASYNC_VALIDATORS と AsyncValidator も利用しました。
よくある質問
「カスタムコントロールのバリデーション」レッスンは無料ですか？
はい。「カスタムコントロールのバリデーション」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。
「カスタムコントロールのバリデーション」で何を学びますか？
カスタムコントロールからバリデーターを提供します ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Angular Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「カスタムコントロールのバリデーション」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このAngular Academyレッスンでコードを書いて実行できますか？
はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- ControlValueAccessorインターフェース
- 値の書き込みと登録
- 無効状態とタッチ状態の処理
- カスタムコントロールのバリデーション