0Pricing
Angular Academy · レッスン

型付きリアクティブフォーム

厳密な型付けでフォームを構築します

「型付きリアクティブフォーム」はCoddyKit上の無料Angular Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。

型付きフォームのメリット

Angular 14より前は、リアクティブフォームの値がanyとして型付けされていました。型付きリアクティブフォームを使うと、コンパイラーがフォームの値の構造やコントロール名を把握でき、完全な型安全性が得られます。

型付きFormControl

FormControlはジェネリックです。値の型を指定すると、読み取りと書き込みがチェックされます。

const name = new FormControl<string>('', {
  nonNullable: true
});

型付きFormGroup

FormGroupは、渡されたコントロールから値の型を推論します。

const form = new FormGroup({
  email: new FormControl(''),
  age: new FormControl(0)
});

推論される値の型

上記のグループのvalueは{ email: string | null; age: number | null }として型付けされ、すべてコンパイル時にチェックされます。

const v = form.value; // typed automatically

null許容性

デフォルトでは、コントロールをnullにリセットできるため、値の型には| nullが含まれます。nonNullableを使うと、nullを除外できます。

new FormControl('', { nonNullable: true });
// value type: string (no null)

安全にコントロールへアクセスする

form.controls.emailは厳密に型付けされているため、コントロール名のタイプミスをコンパイラーが検出します。

form.controls.email.setValue('a@b.com');

getとcontrolsの比較

型安全性のため、form.get('name')よりもform.controls.nameを優先してください。getは、型付けが緩やかなAbstractControl | nullを返します。

getRawValue

getRawValue()は、無効化されたコントロールを含むすべての値を返します。一方、valueは無効化されたコントロールを除外します。

const all = form.getRawValue();

ネストされたグループ

型付きグループは組み合わせて使用できます。ネストされたFormGroupは、独自の型付き構造を親の値に提供します。

const form = new FormGroup({
  user: new FormGroup({
    first: new FormControl(''),
    last: new FormControl('')
  })
});

patchValueの型安全性

patchValueはフォームの値の部分型を受け取ります。未知のキーはコンパイラーによって警告されます。

form.patchValue({ email: 'x@y.com' });

レガシーフォームの移行

段階的な移行のために、UntypedFormGroupなどの型なしAPIも用意されています。新しいコードでは、安全性のために型付きクラスを使用してください。

クイックチェック

型付きリアクティブフォームについての理解度を確認します。

まとめ

FormControlとFormGroupをジェネリックにすることで型付きリアクティブフォームがチェック済みの値の構造を推論できること、デフォルトでは| nullが含まれること（nonNullableで回避可能）、そしてcontrolsによるアクセスの方がgetより安全であることを学びました。

よくある質問

「型付きリアクティブフォーム」レッスンは無料ですか？

はい。「型付きリアクティブフォーム」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。

「型付きリアクティブフォーム」で何を学びますか？

厳密な型付けでフォームを構築します ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Angular Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。

「型付きリアクティブフォーム」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このAngular Academyレッスンでコードを書いて実行できますか？

はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. 型付きリアクティブフォーム
  2. FormArrayと動的フィールド
  3. 非同期バリデーター
  4. FormBuilderのパターン
← Angular Academyに戻る