無効状態とタッチ状態の処理
フォームの状態をコントロールに反映します
「無効状態とタッチ状態の処理」はCoddyKit上の無料Angular Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。
値のその先
完全なカスタムコントロールでは、フォームに関するもう 2 つの概念、disabled 状態と touched 状態にも対応します。これらは UX とバリデーションメッセージの表示を左右します。
setDisabledState
フォームコントロールが無効または有効になると、Angular は setDisabledState を呼び出します（たとえば control.disable() を使った場合）。この状態をコンポーネントに反映してください。
disabled = false;
setDisabledState(isDisabled: boolean): void {
this.disabled = isDisabled;
}ビューへの無効状態の反映
disabled フラグを使ってコントロールのスタイルを変更し、操作を無効にします。これにより、ユーザーが無効なフィールドを変更できないようにします。
template: '<button [disabled]="disabled" (click)="select(s)">star</button>'ハンドラーのガード
無効状態の間は、プログラムやキーボードによる操作が何も行わないよう、変更ハンドラーにもガードを追加してください。
select(rating: number): void {
if (this.disabled) return;
this.value = rating;
this.onChange(rating);
}registerOnTouched
Angular は、コントロールを touched としてマークするコールバックを渡します。onChange と同じように保存してください。
private onTouched: () => void = () => {};
registerOnTouched(fn: () => void): void {
this.onTouched = fn;
}onTouched の呼び出し
通常は blur の発生時など、ユーザーがコントロールから離れたときに touched コールバックを呼び出します。これにより、ユーザーが操作したことが Angular に伝わり、touched を基準にしたバリデーションメッセージを表示できるようになります。
onBlur(): void {
this.onTouched();
}touched が重要な理由
バリデーションの UX では、フィールドが touched になった後にのみエラーを表示することがよくあります。onTouched を呼び出さないと、control.touched は false のままになり、エラーメッセージが適切なタイミングで表示されないことがあります。
<small *ngIf="control.touched && control.invalid">Required</small>blur の接続
コントロールから離れたときに touched としてマークされるよう、テンプレートに blur ハンドラーを追加してください。
template: '<div (blur)="onBlur()" tabindex="0">...</div>'リアクティブな無効化パターン
テンプレートの disabled バインディングではなく、フォーム API（control.disable()）を使って無効化することを推奨します。そうすれば、Angular が一貫して setDisabledState を呼び出せます。
this.form.get('stars')?.disable();アクセシビリティ
無効状態とフォーカス状態をアクセシブルな形で反映します。aria-disabled を設定し、tabindex を管理して、キーボードユーザーが blur を発生させて touched にできるようにします。これにより、すべてのユーザーが利用しやすいコントロールになります。
完全な統合
値、無効状態、touched 状態のすべてに対応したことで、コントロールはリアクティブフォームでもテンプレート駆動フォームでも、ネイティブ入力要素のように動作します。残る仕上げはバリデーションです。
クイックチェック
無効状態と touched に関する知識を確認しましょう。
まとめ
setDisabledState（無効状態を反映し、無効時の操作を防止）と registerOnTouched（blur 時に呼び出して touched としてマークし、バリデーション UX を有効化）に対応しました。無効状態はフォーム API から制御し、コントロールのアクセシビリティを維持してください。
よくある質問
「無効状態とタッチ状態の処理」レッスンは無料ですか？
はい。「無効状態とタッチ状態の処理」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと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フィードバックを取得できます。ローカル設定は不要です。