0

I have an LWC which contains multiple lightning-record-edit-forms, when I save one (say the Account) I want to populate the AccountId on the lightning-record-edit-form for a Contact:

<template>
   <lightning-record-edit-form object-api-name="Account" onsuccess={handleAccountSuccess}>
     <lightning-input-field field-name="Name"></lightning-input-field>
   </lightning-record-edit-form>

   <lightning-record-edit-form object-api-name="Contact" onsubmit={onContactFormSubmit}>
     <lightning-input-field field-name="AccountId" data-id="contactAccount" value={accountId}></lightning-input-field>
     <lightning-input-field field-name="LastName"></lightning-input-field>
   </lightning-record-edit-form>
</template>

Controller

@track accountId;

handleAccountSuccess(event){
   this.accountId = event.detail.id;
   let contactForm = this.template.querySelector('lightning-record-edit-form[data-id="contactForm"]');
   contactForm.submit(); // this DOES NOT fire the 'onsubmit' event, 
                         // but it does submit, however, the Contact records' AccountId field is null!
}

Alternative Controller:

handleAccountSuccess(event){
   this.accountId = event.detail.id;
   
   // get the AccountId input-field and set the value
   this.template.querySelector('[data-id="contactAccount"]').value = this.accountId;

   let contactForm = this.template.querySelector('lightning-record-edit-form[data-id="contactForm"]');
   contactForm.submit(); 
}

So I think the issue is with actually getting the lightning-record-edit-form to recognize that the value={accountId} has been updated? (The UI shows it has a value and highlights the Account name.

7
  • is that a typo "this.templateSelector"? – User6670 Feb 13 at 7:44
  • @User6870, yes I retyped it from scratch 😉 my bad! should this.template.querySelector – jordan.baucke Feb 13 at 19:06
  • so whats the problem here , i copied the code with the second controller and it created a contact with account when i created a new account – User6670 Feb 14 at 11:12
  • are you asking why it is not working with first controller – User6670 Feb 14 at 11:15
  • @User6670, Yes- I am asking why the FIRST controller does not work. I am assigning the value={accountId} attribute its stands to reason that that value should be part of the POST request sent by the lightning-record-edit-form when I call submit() on the form no? – jordan.baucke Feb 14 at 21:08
0

It may not be the answer you want but anyway So i am not sure why this happen but when we use the first controller and instead of calling submit() directly if we call it inside the timeout scope it creates the contact with account attached

taking your example if you put

handleAccountSuccess(event){
 this.accountId = event.detail.id;
  
   var context=this;
   // get the AccountId input-field and set the value
   setTimeout(function( ){   let contactForm = context.template.querySelector('lightning-record-edit-form[data-id="contactForm"]');
   contactForm.submit(); }, 1);
}

maybe it is because 1ms delay is enough or may be because it runs in async or could be something else not sure also you may want to look into this if you use settimeout https://github.com/salesforce/eslint-plugin-lwc/issues/13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.