0Pricing
Angular Academy · レッスン

FormArrayと動的フィールド

実行時にフォームコントロールを追加・削除します

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

動的なフィールド集合

電話番号や明細項目のリストなど、フィールド数が変動するフォームがあります。FormArrayは、順序を持ち、増減可能なコントロールのコレクションを管理します。

FormArrayの作成

FormArrayは、コントロールまたはグループの配列を保持します。

const phones = new FormArray([
  new FormControl(''),
  new FormControl('')
]);

FormGroup内での使用

配列を親グループに組み込むと、フォーム全体の値の一部になります。

const form = new FormGroup({
  name: new FormControl(''),
  phones: new FormArray<FormControl<string>>([])
});

コントロールの追加

pushを呼び出すと、新しいコントロールを動的に追加できます。

addPhone() {
  this.phones.push(new FormControl('', { nonNullable: true }));
}

コントロールの削除

removeAt(index)を使うと、指定したコントロールを削除できます。

removePhone(i: number) {
  this.phones.removeAt(i);
}

@forでのレンダリング

テンプレート内で配列のコントロールを反復処理し、formControlNameを使ってそれぞれをインデックスでバインドします。

<div formArrayName="phones">
  @for (ctrl of phones.controls; track $index) {
    <input [formControlName]="$index" />
  }
</div>

formArrayNameディレクティブ

formArrayNameはテンプレートブロックを配列に関連付け、内側のformControlNameは数値のインデックスを使用します。

グループの配列

より複雑な項目には、配列にFormGroupを格納します。たとえば、それぞれの連絡先に名前と電話番号を持たせる場合です。

const contacts = new FormArray<FormGroup>([]);
contacts.push(new FormGroup({
  label: new FormControl(''),
  number: new FormControl('')
}));

グループ項目のレンダリング

配列内の各グループには、インデックスとともにformGroupNameを使用します。

@for (g of contacts.controls; track $index) {
  <div [formGroupName]="$index">
    <input formControlName="label" />
    <input formControlName="number" />
  </div>
}

値の読み取り

配列の値は、現在のコントロールを反映した順序付きの通常の配列です。

const list = this.phones.value; // string[]

配列のクリア

clear()はすべてのコントロールを一度に削除します。動的なセクションをリセットするときに便利です。

this.phones.clear();

クイックチェック

FormArrayについての理解度を確認します。

まとめ

FormArrayは、コントロールまたはグループの動的で順序付きのコレクションを管理し、push、removeAt、clearを使って操作することを学びました。レンダリングにはformArrayNameと、インデックス付きのformControlName／formGroupNameを使用します。

よくある質問

「FormArrayと動的フィールド」レッスンは無料ですか？

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

「FormArrayと動的フィールド」で何を学びますか？

実行時にフォームコントロールを追加・削除します ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「FormArrayと動的フィールド」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

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