レコードの編集

レコードを編集できるフォームを作成するための最も簡単な方法は、lightning-record-form を使用することです。フォームのレイアウトをカスタマイズしたり、カスタマイズ値を事前に読み込んだりするには、lightning-record-edit-form を使用します。

レコードを編集するには、record-id および object-api-name 属性を使用します。レコード ID を指定した場合、コンポーネントではデフォルトでビューモードが使用され、出力項目に編集アイコンが表示されます。編集アイコンをクリックすると、すべての更新可能な項目が編集可能になります。編集可能なフォームには、レコードを更新するための [保存] ボタンと、変更内容を破棄するための [キャンセル] ボタンがあります。

コンポーネントには、デフォルトの送信およびエラーハンドラがあります。エラーは、自動的にリストの最上部に表示されます。

次の例は、コンパクトレイアウトで取引先レコードの項目を更新できるようにしています。項目は 2 列レイアウトで表示されます。

次の例をレコードページに配置することで、record-id プロパティと object-api-name プロパティを継承できます。

カスタムイベントを使用することで、送信の成功または失敗時にトーストを表示するなど、デフォルトのフォーム動作を上書きできます。詳細は、lightning-record-form リファレンスドキュメントを参照してください。

項目名の配列を指定するか、または項目への参照をインポートすることで、編集可能フォームに表示する項目を指定できます。

次の例では、github.com/trailheadapps/lwc-recipes リポジトリにある recordFormStaticContact コンポーネントを使用しています。静的なスキーマ定義を使用して、レコードの編集可能フォームを表示します。

JavaScript ファイルで項目参照をインポートします。

フォーム項目のカスタムレイアウトを指定するには、lightning-record-edit-form コンポーネントを使用します。レコード項目種別に基づいて入力コントロールを表示する lightning-input-field に項目を渡します。次の例では、カスタムレイアウトを使用していくつかの項目を表示しています。次のコンポーネントの例を取引先責任者レコードページに追加することで、record-id プロパティと object-api-name プロパティを継承できます。

lightning-record-edit-form は、フォームの送信とエラーを自動的に処理します。エラーメッセージを自動的にフォーム項目の上または下に表示するには、lightning-messages を lightning-input-field コンポーネントの前または後に追加します。

lightning-record-edit-form には、lightning-record-form にあるような [キャンセル] ボタンや [保存] ボタンはありません。項目値を元に戻すための [キャンセル] ボタンを作成するには、reset() メソッドをコールする lightning-button コンポーネントを使用します。record-id に実際のレコード ID を指定するか、またはこの例を取引先責任者レコードページに配置することで record-id プロパティを継承します。

lightning-input-field コンポーネントの reset() メソッドをコールします。

lightning-record-edit-form は、フォームの送信とエラーを自動的に処理します。エラーメッセージを自動的にフォーム項目の上または下に表示するには、lightning-messages を lightning-input-field コンポーネントの前または後に追加します。

lightning-record-edit-form では、次のカスタムイベントを処理できます。

• error — フォームがサーバ側のエラーを返した時点で実行されます。
• load — フォームがレコードデータを読み込んだ時点で実行されます。
• submit — フォームが送信されたときに起動します。
• success — フォームデータが正常に保存されたときに起動します。

次の例は、フォームの送信時にエラーが発生した場合にトーストを表示します。よくあるエラーとしては、ネットワークにアクセスされていない、フォームに必須項目がない、などがあります。実際のレコード ID を指定するか、またはこの例を取引先責任者レコードページに配置することでレコード ID を継承します。

トーストを表示するには、lightning/platformShowToastEvent モジュールをインポートします。

event.detail.message は、エラーの一般的な説明を返します。項目固有のエラー (入力規則からのエラーなど) を返すには、項目とレコード例外エラーのリストを提供する event.detail.output.fieldErrors を使用します。

FirstName、LastName、Email 項目で入力規則エラーが発生すると、event.detail.output.fieldErrors では次のような情報が返されます。

詳細は、lightning-record-edit-form リファレンスドキュメントを参照してください。

**「カスタムイベントを使用したデフォルト動作の変更」**で説明されているように、lightning-record-edit-form でネストされる lightning-input-field を使用して入力規則エラーを作成し、項目検証を適用することをお勧めします。

lightning-input-field では、クライアント側カスタム検証はサポートされていません。独自のクライアント側検証を実装する場合、代わりに lightning-record-edit-form でネストされる lightning-input を使用することを検討してください。

次の例を取引先レコードページに配置します。この例では、編集できるように lightning-input コンポーネントを [名前] 項目に結び付けます。

getRecord ワイヤアダプタを使用して lightning-input コンポーネントを Salesforce 項目に結び付け、独自の表示ラベルを提供します。この結び付けは、lightning-input-field を使用していると自動的に行われますが、lightning-input を使用していると自動的に行われません。lightning-record-edit-form の onsubmit イベントハンドラを使用してレコードデータを送信します。イベントハンドラで、setCustomValidity() を使用して検証チェックを実行し、ユーザ入力値で項目を更新します。

lightning-input には、カスタム検証の属性 (min、max、pattern など) が用意されています。詳細は、lightning-input リファレンスドキュメントを参照してください。