非同期バリデーター
非同期でサーバーに対して検証します
「非同期バリデーター」はCoddyKit上の無料Angular Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。
待機するバリデーション
ユーザー名が使用可能かどうかの確認など、サーバーを必要とするバリデーションがあります。非同期バリデーターは、エラーマップまたはnullに解決されるPromiseまたはObservableを返します。
AsyncValidatorFn型
非同期バリデーターはコントロールを受け取り、Observable<ValidationErrors | null>（またはPromise）を返します。
const v: AsyncValidatorFn = (control) => {
return checkAvailable(control.value);
};nullは有効を意味する
有効な場合はnullに解決し、無効な場合は{ taken: true }のようなエラーオブジェクトに解決します。これは同期バリデーターと同じです。
ユーザー名バリデーター
このバリデーターはサービスを呼び出し、その結果をマッピングします。
usernameValidator(api: UserApi): AsyncValidatorFn {
return (control) =>
api.isTaken(control.value).pipe(
map(taken => taken ? { taken: true } : null)
);
}登録する
非同期バリデーターは、同期バリデーターとは別に、コントロールの3番目の引数に指定します。
new FormControl('', {
validators: [Validators.required],
asyncValidators: [usernameValidator(api)]
});PENDING状態
非同期バリデーターの実行中は、コントロールのステータスがPENDINGになります。これを使ってスピナーを表示できます。
@if (form.controls.username.pending) {
<span>Checking...</span>
}リクエストのデバウンス
非同期バリデーターは値が変更されるたびに実行されます。サーバーへの過剰なリクエストを避けるため、デバウンスしてください。
return timer(300).pipe(
switchMap(() => api.isTaken(control.value)),
map(taken => taken ? { taken: true } : null)
);switchMapで古い呼び出しをキャンセルする
switchMapを使うと、値が再び変更されたときに実行中の前回のリクエストがキャンセルされるため、最新の結果だけが使用されます。
updateOn戦略
updateOn: 'blur'を設定すると、ユーザーがフィールドから離れたときだけ非同期バリデーションが実行され、リクエストを減らせます。
new FormControl('', {
asyncValidators: [usernameValidator(api)],
updateOn: 'blur'
});エラーの読み取り
バリデーションが完了し、コントロールがdirtyまたはtouchedになった後でエラーを表示します。
@if (form.controls.username.hasError('taken')) {
<span>Username already taken</span>
}ベストプラクティス
必ずデバウンスを行い、古いリクエストをキャンセルし、保留中であることを示すインジケーターを表示してください。また、フォームがPENDINGのままにならないよう、ネットワークエラーも処理してください。
クイックチェック
非同期バリデーターについての理解度を確認します。
まとめ
AsyncValidatorFnはValidationErrors | nullを返すObservableまたはPromiseであり、コントロールの3番目の引数に登録することで、コントロールがPENDINGになることを学びました。サーバーへの呼び出しを管理するには、デバウンスを行い、switchMapを使用します。
よくある質問
「非同期バリデーター」レッスンは無料ですか？
はい。「非同期バリデーター」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。
「非同期バリデーター」で何を学びますか？
非同期でサーバーに対して検証します ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Angular Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「非同期バリデーター」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このAngular Academyレッスンでコードを書いて実行できますか？
はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。