データバインディング

接続されたフォーム

接続されたフォームは、アプリのデータスキーマのモデルにバインドされます。接続されたフォームが送信されるたびに、バインドされたデータモデルにレコードが自動的に作成または更新され、フォームの入力フィールドの一部またはすべてがデータモデルのフィールドにマッピングされます。

接続されたフォームは、DataStore の有無を問わず、任意の Amplify GraphQL API で自動的に機能し、onSubmit ハンドリングは必要ありません。

接続されていないフォームは、AWS アカウントがなくても、任意の React または Nextjs プロジェクトで使用できるスタンドアロン React コンポーネントです。送信時に、フォームの入力値はonSubmit フックを介して処理するためにアクセス可能です。

Amplify Sandbox を使用して、AWS にログインせずに接続されていないフォームを構築できます。

すべての接続されたフォームと接続されていないフォームは、作成フォームまたは更新フォームのいずれかです。

作成フォームは空の入力でフォームをレンダリングします。作成フォームがデータモデルに接続されている場合、送信時に常に新しいレコードが生成されます。

更新フォームは、フォームを事前に入力するための入力値が必要です。

データモデルに接続されている更新フォームの場合、id プロップまたはモデルプロップを使用できます。

<AuthorUpdateForm id="ac74af5c-3aab-4274-8f41-23e1e6576af5" />

モデルプロップ：フォームが Author という名前のデータモデルにバインドされている場合、フォームには author という名前のプロップもあり、レコードを受け取ることができます。例：

<AuthorUpdateForm author={authorRecord}>

一般的には、id プロップの代わりにモデルプロップを使用することをお勧めします。

接続されていない更新フォームの場合、initialData プロップにオブジェクトを渡してフォームを事前に入力できます。ただし、すべての接続されていないフォームと同様に、フォーム送信をコードで処理する必要があります。

接続されていないフォームを接続されたフォームに変換する場合は、フォーム設定メニュー内から行えます。フォームのデータモデルマッピングを設定するには：

接続されていないフォームのオプションを表示するデータモデルマッピングドロップダウン

このドロップダウンメニューから、いくつかのオプションがあります：

新しいデータモデルを作成する：Studio はフォームを使用して、スキーマで新しいデータモデルを生成します

既存のモデルから選択する：

コードでデータをマッピングする：このオプションを使用してデータマッピングを無視し、このフォームを接続されていないままにしておきます

フォームが既にデータモデルに接続されている場合、Studio はフォームを拡張する際に接続を管理するのに役立ちます。接続されたフォームを拡張するには：

Studio は、データモデルにマップされていないすべてのフィールドを右側にリストします。

マップされていないフィールドがユーザーが処理するために右側のバーに表示されます

Update data model を選択すると、Studio はデータモデルスキーマにフィールドを自動的に追加します。

I'll handle in code を選択すると、Studio はこのフィールドのデータマッピングを無視し、onSubmit フックを使用してこのフィールドを処理できます。