フォーム入力のカスタマイズ
このガイドでは、npx ampx generate forms を実行して生成された接続フォームをカスタマイズする方法を学びます。始める前に以下が必要です:
- クラウドサンドボックスと Amplify Data リソースが稼働している状態 (npx ampx sandbox)
- 生成された接続フォームを持つフロントエンドアプリケーション
すべての Amplify フォームは Amplify UI ライブラリ で構築されています。生成されたフォームは、TextField、TextAreaField、SelectField などの各入力コンポーネントのプロパティをオーバーライドするメカニズムを提供します。フォームコンポーネント上の overrides プロップを使用して、これらのコンポーネントのプロップをオーバーライドできます。たとえば、TodoCreateForm の content フィールドのバリエーションとラベルを変更したい場合:
import TodoCreateForm from '@/ui-components/TodoCreateForm'
<TodoCreateForm overrides={{ content: { variation: 'quiet', label: 'Todo' } }}/>生成されたフォームのコードを直接更新する必要があります。フォームをカスタマイズする方法は以下の通りです。
フォーム入力フィールドを手動で追加
データモデルに接続されたフォーム入力を生成されたフォームに手動で追加できます。たとえば、データモデルに priority フィールドを追加したとします。生成されたフォームに対して次の編集を行います:
// 1. initialValues を設定 const initialValues = { content: "", priority: "" // priority の初期値 };
// 2. 状態設定 const [priority, setPriority] = React.useState(initialValues.priority);
// 3. resetValues を更新 const resetStateValues = () => { .. // 前のフィールド setPriority(initialValues.priority) setErrors({}); };
// 4. 検証設定 const validations = { content: [], priority: [] // 今のところ特別な検証はないと仮定 };
// 5. フォーム送信を更新 onSubmit={async (event) => { event.preventDefault(); let modelFields = { .., priority };
// 6. TextField を追加 <TextField label="Priority" isRequired={false} isReadOnly={false} value={priority} onChange={(e) => { let { value } = e.target; if (onChange) { const modelFields = { priority: value, }; const result = onChange(modelFields); value = result?.priority ?? value; } if (errors.priority?.hasError) { runValidationTasks("priority", value); } setPriority(value); }} onBlur={() => runValidationTasks("priority", priority)} errorMessage={errors.priority?.errorMessage} hasError={errors.priority?.hasError} {...getOverrideProps(overrides, "priority")} />オプションフィールドを手動で追加
Select Fields、Radio Group Fields、Autocomplete Fields は、ユーザーが選択できるオプションのセットが必要です。たとえば、「Status」入力は「未開始」、「進行中」、「完了」のオプションのみを持つことができます。これは上記の 6 ステップと同じですが、ステップ 6 で <TextField> を <SelectField> に置き換えます。
// 6. <SelectField> コンポーネントをインポートしてフォーム戻り値に追加 <SelectField label="Label" placeholder="Please select an option" value={status} onChange={(e) => { let { value } = e.target; if (onChange) { const modelFields = { status: value }; const result = onChange(modelFields); value = result?.status ?? value; } if (errors.status?.hasError) { runValidationTasks("status", value); } setStatus(value); }} onBlur={() => runValidationTasks("status", status)} errorMessage={errors.status?.errorMessage} hasError={errors.status?.hasError} {...getOverrideProps(overrides, "status")} > <option children="Not started" value="Not started" {...getOverrideProps(overrides, "statusOption0")}></option> <option children="In progress" value="In progress" {...getOverrideProps(overrides, "statusOption1")}></option> <option children="Done" value="Done" {...getOverrideProps(overrides, "statusOption2")}></option> </SelectField>フォームの間隔 (パディングとギャップ) を設定
フォームと入力間に間隔を追加します。間隔値は CSS 長さ値 (px、rem、em、%) またはテーマオブジェクトの間隔値への参照 (xss、medium、large) のいずれかです。
import TodoCreateForm from '@/ui-components/TodoCreateForm'
<TodoCreateForm overrides={{ TodoCreateForm: { rowGap: 'xl', // 入力間の水平ギャップ columnGap: 'xs', // 入力間の垂直ギャップ padding: 'xl', // フォーム周囲のパディング },}} />送信ボタンと クリアボタンのラベルをカスタマイズ
アクションボタンのラベルをカスタマイズして、フォームのユースケースをより適切に説明できます。たとえば、Submit を Create Todo に変更します。
import TodoCreateForm from '@/ui-components/TodoCreateForm'
<TodoCreateForm overrides={{ ClearButton: { children: 'Close' }, SubmitButton: { children: 'Save todo' }}} />送信ボタンとクリアボタンの表示を切り替え
アクションボタンの表示をカスタマイズして、フォームのユースケースをより適切に対応できます。
import TodoCreateForm from '@/ui-components/TodoCreateForm'
<TodoCreateForm overrides={{ ClearButton: { display: 'none' }, SubmitButton: { display: 'none' }}} />すべてのフォームアクションボタンを非表示にした場合でも、onChange イベントハンドラを活用してフォームライフサイクルを自己管理できます。これは、明示的なユーザー確認なしにリアルタイムでデータを更新するフォームに役立ちます。
import TodoCreateForm from '@/ui-components/TodoCreateForm'
<TodoCreateForm onChange={(fields) => { console.log({ fields }) // フィールドを必ず返してください! return fields }}/>