Angular ダイナミックフォーム例の説明

この記事では主に角度動的フォームの実装アイデアを紹介します。具体的な実装の詳細については、コミュニティ内の semlinker によるフォームの動的作成に関する記事と、彼が推奨する参考リソースを参照してください: Configurable Reactive Forms in Angular with DynamicComponents この著者の記事は主に部分翻訳です。そして上記記事の反省。

動的フォームの使用シナリオ

このフォームは、ユーザーの選択やサーバーから返された情報に応じて再構成できます。たとえば、入力要素のセットの追加や削除などです。グループ選択要素など。

この場合、最初からすべてのフォームをテンプレートに記述し、選択制御にngifツリー構造を使用すると、プログラムはより冗長になります。

この頃。ユーザーの選択 (構成による) またはサーバーの応答に基づいて、プログラムが必要なフォームを自動的に生成することが最善です。これは動的フォームが扱うビジネスです。

---

コンポーネント生成の関連概念

• コンポーネントの 2 つのコンポーネント

フォームを動的に生成するには、まずコンポーネントがどのように生成されるかを理解する必要があります。

angular コンポーネントは 2 つの部分で構成されます。

1. Wrapper

Wrapper は、初期化されると、コンポーネントをインスタンス化します。同時に、コンポーネントの変更検出と、ngOnInit や ngOnChanges などのフック関数のトリガーも行います。

1. View

View は、レンダリングされたテンプレートのレンダリングを担当し、コンポーネントの外観を表示し、Wrapper の変更検出をトリガーできます。コンポーネントは複数のビューを持つことができ、Angular が提供する 2 つの関数を呼び出すことで、各ビューを独自に生成および破棄できます。このプロセスにはトップレベル ビューの参加は必要ありません。

• コンポーネントの通常の読み込み方法（非動的読み込み方法）

通常、コンポーネントをルートコンポーネントまたは別のコンポーネントに埋め込みます。埋め込まれたコンポーネントを子コンポーネント、埋め込まれたコンポーネントを親コンポーネントと呼びます。この時点で、サブコンポーネント コードがコンパイルされると、コンポーネント ファクトリ コンポーネント ファクトリ (Angular コア クラス ComponentFactory のインスタンス) と hsot ビュー が生成されます。ホスト ビューは配置を担当します。親コンポーネント内のこのコンポーネントの DOM ノード、およびコンポーネントを生成するラッパーとビュー。

• コンポーネントの動的ロード

そして、動的コンポーネントをコンポーネントビューに挿入したい場合、動的コンポーネントのインスタンスを取得することはできません。これは、非動的コンポーネントコンパイラーが行うことであるためです。

---

動的コンポーネントの実装

angular は、上記の問題を解決するための関数をいくつか提供しています。これらの関数を使用するには、2 つのオブジェクトを挿入する必要があります。

constructor(
    private componentFactoryResolver: ComponentFactoryResolver,
    private viewcontainerRef: ViewContainerRef,
  ) {
      
  }

ComponentFactoryResolver と ViewContainerRef を注入しました。

ComponentFactoryResolver は、コンポーネント クラスをパラメータとして受け取り、コンポーネント クラスに基づいてコンポーネント ファクトリを生成するメソッド (resolveComponentFactory()) を提供します。これが、前述のコンポーネント ファクトリです。

ViewContainerRef は、コンポーネント ファクトリをパラメーターとして受け取り、このビューでサブコンポーネントを生成するメソッド (createComponent()) を提供します。 (私の個人的な理解では、ホストビューが行うことを処理し、コンポーネントのラッパーとビューを生成します)

---

動的フォームの実装

上記では、動的コンポーネントを実装するためのいくつかのテクノロジーを簡単に紹介しました。次に、それを行う方法について考えてみましょう。ダイナミックなフォルム。

• 具体的なアイデア

独立した動的フォームモジュールを作りたい 動的フォームを使いたい場合は、このモジュールを導入するだけで簡単に使用できます。

このモジュールが完了すると、トップレベルのユーザーの観点から見たワークフローは次のようになることを願っています:

問題の核心はこれにあります。コンポーネント。入力属性に基づいて必要なフォームを生成する方法。

言い換えれば、ComponentFactoryResolver と ViewContainerRef を呼び出してコンポーネントを動的に生成する必要があるのか​​、それとも他のものによって処理されるべきなのかということです。

次の図は実装のアイデアです:

1. 実際、動的フォームを小さな動的コンポーネント(プリロードされていない)に分割し、外側のコンポーネントがコンテナとして機能します。内部で生成と破壊が行われ、ダイナミックなフォルムを形成します。

2. 调用ComponentFactoryResolver和ViewContainerRef生成组件的的这部分逻辑没有集成在外层容器中，而是交给了一个自定义的指令和ng-container。因为指令没有视图，他通过注入ViewContainerRef获取到的是宿主的视图容器。由于ng-container不会被渲染，所以获取到的视图容器就是外层组件容器的视图容器。

这么处理的好处就是不需要由外层组件统一对各个拆分的动态组件进行管理，相当于是由动态组件自己进行管理。

外层组件容器大概会是下面这样：

<form>
  <ng-container *ngFor="let config of configs" [自定义指令] >
 </ng-container>
</form>

configs是用户的配置数据，自定义指令寄宿在ng-container中，根据config渲染出各自的动态组件，而ng-container是透明的。

看一下代码目录结构，最后会是这个样子

以上就是大体的实现思路了，具体还有许多细节可以关注文章开头提到的那两篇文章，讲的很详细。

相关推荐：

php 动态表单的生成和提交解决方案

动态表单（一）动态表单的定义

jQuery实现动态表单验证时文本框抖动效果完整实例_jquery

以上がAngular ダイナミックフォーム例の説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。