1つのlightning-record-edit-formを送信し、onsubmitメソッドparamを実行する方法は？
以下のコードを使用して各フォームを送信すると、onsubmit = {handleSubmit}が実行されません。どうして？
<lightning-record-edit-form key={item.id} object-api-name="professionalExperience__c" onsubmit={handleSubmit}>
this.template
.querySelectorAll("lightning-record-edit-form")
.forEach(element => {
alert('ELEMENTO: ' + JSON.stringify(element));
element.submit();
alert('post submit SUBMIT');
});
handleSubmit(event){
alert('hello');
event.preventDefault(); // stop the form from submitting
const fields = event.detail.fields;
alert(JSON.stringify(fields));
console.log(fields);
this.template.querySelector('lightning-record-edit-form').submit(fields);
}
回答
カスタムは、使用してイベントハンドラを定義する場合提出onsubmit={handleSubmit}以内にlightning-record-edit-form、あなたは必要な（のボタン要素を定義するためにtype='submit'）、レコード編集フォーム内。次に、LWCは、この送信ボタンをカスタムイベントハンドラーコードに接続します。そのため、ボタンをクリックすると、送信イベントがトリガーされ、カスタムイベントハンドラーコードが実行されます。このイベントハンドラコード内で、event.detail.fieldsparamは実行時に更新できるすべてのフィールド値を保持します。
逆に、複数lightning-record-edit-formのs、onclickイベントハンドラーを含む単一の送信/保存ボタン、およびイベントハンドラーに次のコードがある場合onsubmit={handleSubmit}、このハンドラーに接続された特定のボタンがないため、として定義されたカスタムイベントハンドラーは影響しません。コード。
this.template.querySelectorAll("lightning-record-edit-form").forEach(element => {element.submit();});
上記のコードを実行しても、の送信イベントはトリガーされないため、カスタムイベントハンドラーメソッドは呼び出されませんが、レコード編集フォームのlightning-record-edit-formパブリックメソッドが直接呼び出されsubmitます。
のコードにfields属性が表示されないlightning-record-edit-formためlightning-input-fields、コンポーネントで使用していると仮定します。問題の考えられる解決策は、コード内の入力フィールドに直接アクセスすることです。たとえば、稲妻入力フィールドがとして定義されている<lightning-input-field field-name="Name"></lightning-input-field>場合、以下のサンプルコードに示すように、この特定のフィールドにアクセスできます。
const inputFields = this.template.querySelectorAll('lightning-input-field');
if (inputFields) {
inputFields.forEach(field => {
if(field.name === "Name") {
// Do something here with the field
}
});
}
他のLightningレコード編集フォームに同じフィールドがある場合は、data- *属性を使用できます。たとえば、稲妻入力フィールドがとして定義されている<lightning-input-field data-id="Name1" field-name="Name"></lightning-input-field>場合、以下のサンプルコードに示すように、この特定のフィールドにアクセスできます。
const inputFields = this.template.querySelectorAll('lightning-input-field');
if (inputFields) {
inputFields.forEach(field => {
if(field.dataset.id === "Name1") {
// Do something here with the field
}
});
}
または、のonchangeイベントハンドラーを使用lightning-input-fieldして、入力フィールドの値を管理することもできます。
レコードデータの送信を識別および制御する場合は、レコード編集フォームレベルでデータ属性を使用することもできます。免責事項：私はあなたの問題を再現して私の最後にこの解決策をテストしようとはしていませんが、うまくいくはずです。