Angular で動的なフォームを作成する方法

角度のある動的フォームを作成する方法は、サンプルコードを通じて詳細に説明されています。必要な友達はそれを参照してください。

ソースコード: https://github.com/Karin001/ngx-dynamic-form

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

場合によっては、ユーザーの選択またはサーバーが返す柔軟なフォームが必要になることがあります。入力要素のセットや選択要素のセットなどの追加または削除など、情報を再構成します。

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

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

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

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

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

Wrapper

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

View

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

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

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

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

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

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

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

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

ComponentFactoryResolver と ViewContainerRef を注入しました。

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

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

動的フォームの実装

上記では、動的コンポーネントを実装するためのいくつかのテクニックを簡単に紹介しました。次に、動的コンポーネントを作成する方法について考えてみましょう。フォーム。

具体的なアイデア

動的フォームを使用したい場合は、このモジュールを簡単に導入し、少しの設定で使用するだけで、独立した動的フォームモジュールを作成したいと考えています。

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

問題の核心は、このコンポーネントが入力属性を持つコンポーネントであるということです。入力属性に基づいて必要なフォームを生成する方法です。

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

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

実際、動的フォームを小さな動的コンポーネント (プリロードされていない) に分割し、外側のコンポーネントがコンテナとして機能し、すべての動的コンポーネントが生成され、内部が破壊され、それらが合わさってダイナミックなフォルムを形成します。 ComponentFactoryResolver と ViewContainerRef を呼び出してコンポーネントを生成するロジックは、外部コンテナには統合されず、カスタム ディレクティブと ng コンテナに渡されます。この命令にはビューがないため、ViewContainerRef を注入することで取得するのはホストのビュー コンテナです。 ng-container はレンダリングされないため、取得されるビュー コンテナは外側のコンポーネント コンテナのビュー コンテナになります。このアプローチの利点は、分割された各動的コンポーネントを外部コンポーネントが均一に管理する必要がないことです。これは、動的コンポーネント自体によって管理されるのと同じです。

外側のコンポーネントコンテナはおそらく次のようになります:

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

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

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

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在ES6中子组件调用父组件使用方法

在Vue-cli中使用Eslint如何实现自动格式化

在Vue中如何创建组件

以上がAngular で動的なフォームを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。