Angularでフォームを動的に生成する方法

2年 ago
陽, 向宇
1 minute

Angularでは、動的フォーム生成機能を利用して動的にフォームを生成できます。この動的フォーム生成には、AngularのReactive FormsまたはTemplate-driven Formsを使用できます。

動的フォームを構築するためのReactive Formsを使用する：

  1. まず、コンポーネント内に必要なモジュールとサービスをインポートします。
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
  1. 次に、FormGroupを作成します。
formGroup: FormGroup;
  1. コンポーネントのコンストラクタでFormBuilderサービスをインジェクトし、それを使用してフォームグループを作成する。
constructor(private formBuilder: FormBuilder) { }
  1. ngOnInitメソッドで、FormBuilderを使用してフォームコントロールを作成する。
ngOnInit() {
this.formGroup = this.formBuilder.group({});
}
  1. ニーズに応じて、formBuilder には form コントロールを追加するためのメソッドがいくつか用意されています。たとえば次のとおりです。
this.formGroup.addControl('fieldName', this.formBuilder.control('', Validators.required));
  1. HTMLテンプレートで、formGroupディレクティブを使用してフォームグループをバインドする：
<form [formGroup]="formGroup">
<!-- 添加动态生成的表单控件 -->
</form>

テンプレート主導型のフォームを用いて動的なフォームを作成する：

  1. はじめにコンポーネントで必要なモジュールをインポートします。
import { Component } from '@angular/core';
  1. ニーズに応じて、フォームのデータを入れるためのデータモデルを作成する。
dataModel: any = {};
  1. HTMLテンプレートではngModelディレクティブを使用して、データバインディングを行います。
<input type="text" [(ngModel)]="dataModel.fieldName" name="fieldName" required>
  1. ngIf ディレクティブを利用することで、必要に応じてフォームコントロールの表示を動的に制御できます。
<div *ngIf="showField">
<input type="text" [(ngModel)]="dataModel.fieldName" name="fieldName" required>
</div>

Template-driven Form を使用する場合は、追加で FormsModule モジュールが必要であることに注意してください。

こちらはAngularのReactive Formsとテンプレート駆動フォームを利用して、動的にフォームを生成するための簡単な例です。実際の要件に応じて、検証ルール、カスタムコントロールなどの機能を追加できます。

bannerAds