AngularフォームビルダーがApp Builderで簡単に

フォームは、データを収集するために不可欠です。どのアプリを作成する場合でも、ある時点でさまざまな目的を果たすフォームを作成する必要があります。App BuilderのForm Builderを使用すると、直感的なドラッグアンドドロップインターフェイスといくつかの強力な追加機能を使用してAngularフォームの作成を効率化し、フォームの作成をより迅速かつ効率的に行うことができます。

しかし、これについては後で詳しく説明します。次に、フォームについて見て、App Builderがフォームビルダー Angular統合してフォームの作成を簡素化する方法を探ってみましょう。

Angularのフォームビルダーとは何ですか?

従来、Angularでフォームを作成するには、コントロール、グループ、および検証を定義するための定型コードを記述する必要がありました。ただし、Angular Form Builder を使用すると、この手作業が削減され、エラーがなくなります。したがって、Angularのフォームビルダーは、上記のレイアウト構成、フォームコントロール、検証、グループなどを管理しながら、フォームをより簡単かつ自動的に作成するためのより構造化された方法を提供するツールまたは別の機能です。

当社のローコードツールであるApp Builder ™は、最近、これらすべての機能を提供するまったく新しい機能を導入しました。Angularドラッグ&ドロップとして機能するForm Builderは、APIエンドポイントから直接フォーム構造を自動生成するなどの重要な機能により、HTMLフォームの設計を迅速かつ効率的に行い、バックエンド統合を別のレベルに引き上げ、プロセスを大幅に簡素化します。

また、フォームのレイアウトには柔軟性があり、送信、エラー、サーバー側の検証の通知を表示するオプションを備えた詳細なカスタマイズも可能です。

フォームビルダーの主な側面: 

• データソースからエンドポイントをドラッグアンドドロップして、フォームを自動的に作成します

• フォーム内のコンポーネントをさまざまな同等のコンポーネントで変更して、フォームをよりリッチにする

• フォームを最初から作成する

• 作成したフォームの CRUD 機能のテスト

• Angularアプリを生成し、本番環境に対応したコードと完全なコードの柔軟性を備えたGitHubにプッシュする

Angularでの FormControl、FormGroup、FormArray、ControlValueAccessor の理解

Angularアプリでは、FormControl、FormGroup、FormArray、ControlValueAccessor がリアクティブフォームの最も基本的なコンポーネントです。それぞれをチェックして、その役割と機能を理解してみましょう。

フォームコントロール

FormControl は、個々のフォーム フィールドの値と検証ステータスを追跡するために使用されるAngularのクラスです。また、同期検証と非同期検証もサポートしています。FormControl に関する重要なポイントを次に示します。

• バリュートラッキング:フォームフィールドの現在の値を追跡します。

• 状態管理:フォームフィールドの状態(有効、無効、タッチ、未タッチ)を追跡します。

• 検証: 同期検証と非同期検証の両方をサポートします。

• イベント: フォームフィールドに関連するユーザーインタラクションとイベントへのアクセスを提供します。

リアクティブフォームはコンポーネントクラス上に構築されているため、Angularリアクティブフォームの検証は、コンポーネントクラスのフォーム制御モデルにバリデーター関数を直接追加することによって行われます。

値が有効な場合、バリデータは null を返します。値が無効な場合、バリデーターは一連のエラーを生成し、特定のエラーメッセージを画面に表示できます。

以下のデモでは、Angularリアクティブフォーム検証を使用した一般的な映画予約フォームを示しています。このフォームでは、送信前に必須フィールド(映画、フルネーム、メール、ジャンル)に入力する必要があります。未完了の入力は特定のエラーメッセージとともに赤で強調表示され、有効なフィールドは緑に変わります。「予約」ボタンは、すべてのフィールドが正しく入力されるまで無効のままで、アクティブになり、フォームを正常に送信できます。

フォームグループ

Angularの FormGroup は、複数の FormControl インスタンスを集約するコンテナです。子フォーム コントロールの値と検証状態を追跡し、それぞれの名前をキーとして使用してオブジェクトにシリアル化します。

FormArray は、複数のメールアドレスや電話番号の追加など、可変数の類似したコントロールを必要とするフォームに特に便利です。

ユーザーがメールアドレスなど、複数のエントリを入力できるフォームのコード例:

import { Component } from '@angular/core';import { FormGroup, FormArray, FormControl, Validators } from '@angular/forms';@Component({ selector: 'app-email-form', template: \' <form [formGroup]="form"> <div formArrayName="emails"> <div *ngFor="email of emailArray.controls; let i = index"> <label for="email-{{ i }}">Email {{ i + 1 }}</label> <input id="email-{{ i }}" type="email" [formControlName]="i" placeholder="Enter email" /> <button type="button" (click)=&引用;removeEmail(i)">Remove</button> </div> </div> <button type="button" (click)="addEmail()">Add Email</button> <button type="submit" [disabled]="form.invalid">Submit</button> </form> <p>form value: {{ form.value | json }}</p> \', }) export class EmailFormComponent { form = new FormGroup({ emails: new FormArray([new FormControl('', Validators.email)]), }); get emailArray(): FormArray { return this.form.get('emails') as FormArray; } addEmail() { this.emailArray.push(new FormControl('', Validators.email)); } removeEmail(index: number) { this.emailArray.removeAt(index); } }

主な機能は次のとおりです。

• グループ化: 複数の FormControl インスタンスを 1 つのオブジェクトに結合します。

• 値の集約: 各子コントロールの値を追跡し、それらをオブジェクトに結合します。

• 検証管理: すべての子コントロールの検証ステータスを管理します。

コード例を次に示します。

const profileForm = new FormGroup({ firstName: new FormControl('', Validators.required), lastName: new FormControl(''), email: new FormControl('', [Validators.required, Validators.email]), });

このコード スニペットでは、子コントロールが無効な場合、グループ全体が無効と見なされます。

FormGroup は、1 つ以上のフォーム コントロールのコンテナーとして機能します。関連するフィールドをグループ化し、それらの値と検証をまとめて管理できるようにします。これは次のように初期化されます。

• デフォルト値: 空の文字列 (")

• Validators.required: コンポーネントフィールドが空のままでないことを確認します。

上記の例でFormGroupが行うこと:

• フィールドの値を追跡する: datePicker の現在の値にアクセスし、更新可能な状態に保ちます。

• 検証の管理: フォームを送信する前に、フィールドが有効であることを確認します。

• ロジックのカプセル化: 複数のコントロールを論理ユニットに結合し、フォーム管理を簡素化します。

フォーム配列

FormArray は FormGroup と似ていますが、名前をキーとして使用する代わりに、コントロールをインデックス付き配列として整理します。これにより、リストに複数の項目を追加するなど、コントロールの数が動的なシナリオに最適です。主な機能は次のとおりです。

• ダイナミックフォーム:動的に作成されたフォームを構造化配列に収集します。

• インデックス作成: 配列内のインデックスを使用して個々のフォームにアクセスします。

• ステータス集約: 配列のステータス値を小さくして、配列のステータスを計算します。1 つのコントロールが無効な場合、配列全体が無効と見なされます。

Angularの ControlValueAccessor

ControlValueAccessor は、Angularフォームがカスタム フォーム コントロールと対話し、標準のフォーム要素のように動作できるようにするインターフェイスです。フォーム コントロールとして機能するカスタム コンポーネント (カスタム日付ピッカーなど) を作成する場合、ControlValueAccessor を実装すると、Angularのリアクティブ フォームとシームレスに統合できます。

ControlValueAccessor の例を次に示します。

@Component({ selector: 'custom-input', providers: [ { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CustomInputComponent), multi: true } ] }) export class CustomInputComponent implements ControlValueAccessor { // ここに実装 }

この設定により、カスタム入力コンポーネントをネイティブフォーム要素と同様にAngularフォーム内で使用できるようになります。得られるものは次のとおりです。

• シームレスな統合: カスタムコンポーネントがAngularフォームを操作できるようにします。

• 再利用性:再利用可能なフォームコンポーネントを作成できます。

• 一貫性: カスタム コントロールが Angular のフォーム API に準拠していることを確認します。

Angular Form Builderとローコードツールを組み合わせるメリット

今日のアプリ構築では、スピードと効率性が不可欠です。そのため、フォームの作成に関しても、チームは結果を最適化し、取り組みを強化するための最善の方法を探します。Angular Form Builder をローコードで統合することは、いくつかの利点を確保する戦略的な動きになります。

迅速なフォーム作成 

手動でフォームを作成し、コードを記述するには、コード生成よりもはるかに時間がかかります。App Builderのドラッグ&ドロップによるフォーム作成エクスペリエンスにより、大規模なコーディングなしでフォームをより迅速に作成するためのツールと機能を利用できます。APIエンドポイントから直接完全なフォームを簡単に生成できるため、時間と労力を大幅に節約できます。

フルカスタマイズ 

スピードだけでなく、柔軟性やカスタマイズ性を求めることもできます。App BuilderのAngular Form Builder を使用すると、ブランディングや任意の要件に合わせて、スタイル設定、コンポーネント、およびフォームレイアウトを調整できます。直感的な設定があり、検証、エラーメッセージ、その他のカスタマイズされた拡張機能を追加するのに役立ちます。

コラボレーションの改善 

フォームの作成には、通常、エクスペリエンスをブランド化するデザイナーも関与します。これにより、チームが承認と開発のためにハンドオフと設計ファイルを交換するため、フォームの作成スケジュールが長引くことがよくあります。ただし、App BuilderとAngular Form Builder の機能により、フォーム構造を毎回テストおよびデバッグする必要がなくなるため、このコラボレーションが強化されます。直感的なインターフェースにより、設計プロセスが簡素化され、すぐに簡単に生成できるフォームが得られます。広範な技術的専門知識は必要ありません。

スケーラビリティ 

アプリケーションが大きくなる可能性があり、これにはスケーラビリティが必要です。App Builderの最新のForm Builder機能で構築されたフォームは、スケーラブルで、すべての使用レベルで高いパフォーマンスを維持します。 また、ベンダーロックインがないため、あなたとあなたのチームはアプリの機能をあきらめることはありません。

App BuilderでAngularフォームを作成する方法

このハウツーガイドでは、自動と手動の 2 つの方法を示します。まず、App Builderのマスター ディテール シナリオを非常に明確に示す既存のサイド バイ サイド レイアウトから始めます。お客様のリストを作成し、フォームでこれらのお客様を更新します。

フォームの自動作成

ステップ 1: データエンドポイントのドラッグ 

まず、データ エンドポイントをデザイン画面にドラッグします。一連のフォーム コンポーネントは、エンドポイントのプロパティに基づいて自動的に生成されます。

• POST メソッドと PUT メソッドは、データ送信用の入力フィールドを作成します。

• OnSuccess や OnError のインタラクションなどの基本的なイベント処理は、自動的に設定されます。

ステップ 2: フォーム コントロールの自動作成とマッピング 

フォームコントロールは、各フィールドのデータ型とメタデータに基づいて作成され、直感的な入力とラベルを保証します(たとえば、日付フィールドは日付ピッカーを使用し、ブールフィールドはスイッチを使用します)。開発者は、コンポーネントの変更、検証の追加、ラベルの調整をプロパティパネルで直接行うための完全な制御を保持します。

ステップ 3: フォームの編集 

フォームが生成されたら、フィールドを含めたり除外したり、ラベルをカスタマイズしたり、入力検証を設定したりするように変更でき、直感的なデザインエクスペリエンスを提供します。App Builderにより、開発者はフォームのレイアウトとコンポーネントの両方を調整できます。

• フォーム内の要素を簡単に追加または削除できます。

• ​必須および無効の検証、ラベルのカスタマイズ、マッピングなどのコントロールのプロパティを調整します。

• アクションボタンを設定します。

手動フォーム作成

App Builderでフォームを手動で作成することもできます。このアプローチの利点は、データ ソースへの即時バインドを必要とせずに、構造とレイアウトを完全に制御できることです。

ステップ1:要素をドラッグアンドドロップする 

これは、入力フィールド、ボタン、フォームコンポーネントなどの要素をフォームコンテナにドラッグアンドドロップしてフォームをデザインすることで行われます。

ステップ 2: データ ソースのバインド 

フォームがデザインされたら、開発者は構成されたデータ ソースからエンドポイントにバインドできます。この柔軟性により、データの相互作用を定義する前にフォーム要素を微調整できます。

ステップ 3: バインディングの動作と検証 

フォームの作成後にエンドポイントを切り替えると、一致しない入力には無効なバインディングの警告が表示され、それらのバインディングはコード出力で壊れたバインディングとして生成されません。 また、API データエンドポイントを使用して Form エンドポイントバインディングダイアログから新しい変数を初期化し、フォームの初期化に必要なコンテキストを提供することもできます。

無効なバインディングは生成されたコードから除外され、アプリケーションがエラーなしでコンパイルされます。 エンドポイントの切り替え時の中断を最小限に抑えるために、App Builderは潜在的な無効化に関する警告を提供します。

結論

どの方法を選択しても、最終的には、App Builder のプレビュー モードを使用してフォームを操作し、リアルタイムの入力検証またはフォーム送信を確認でき、成功または検証エラーを示す通知が表示されます。