3

I have been asked to fix a component created by someone else. I am new to LWC and the person that created this is no longer available for questions. The component is creating a record of a custom object. The record does get created, but only for the fields that have JS variables assigned to them. Here is an example:

this.objectName = 'custom_object__c';

this.createFields = [
  { name: 'custom_date_field__c', value: '' },
  { name: 'custom_type__c', value: ''},
  { name: 'custom_amount__c', value: this.customAmount },

];

this.objectLabel = 'Custom Object';
this.showModal = true;

}

So when the record modal is opened all the fields display, and the two fields without values have a date picker and drop down (with all the correct choices from the object) avaliable. When the record is saved it does save correctly but the the date and picklist field are lost, while the amount field, that has the value of a JS variable assigned is saved just fine.

The values can be selected and are in the fields when I save but they don't get bound to the new record, obviously there is at least one way communication going on because the proper picklist values are there. What don't I understand?

Edit to add a little more detail. There is a "generic" record modal that is made to handle mutliple objects, so the information like objectName and createFields is passed to this form when a button is clicked on the first page, MAIN PAGE:

<c-record-form-modal is-shown={showModal} fields={createFields} object-label={objectLabel} object-name={objectName}></c-record-form-modal>

The record modal looks like this:

    <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">New {objectLabel}</h2>
    </header>
    <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
      <lightning-record-edit-form object-api-name={objectName}>
        <lightning-layout multiple-rows="true">
          <template for:each={fields} for:item='field'>
            <lightning-layout-item size="6" key={field.name}>
              <lightning-input-field data-name="primaryObject" key={field.name} field-name={field.name} value={field.value} onchange={handleUpdate}></lightning-input-field>
            </lightning-layout-item>
          </template>
        </lightning-layout>
      </lightning-record-edit-form>

Then there is the JS controller for that page:

handleSave() {
const fields = Object.assign({}, ...(this.fields.map(item => ({ [item.name]: item.value }))));
const recordInput = { apiName: this.objectName, fields: fields };

createRecord(recordInput)
  .then(record => {
    this.savedRecord = record.id;
    this.dispatchEvent(
      new ShowToastEvent({
        title: 'Success',
        message: this.objectLabel + ' Created',
        variant: 'success'
      })
    )
  }).catch(error => {
    this.dispatchEvent(
      new ShowToastEvent({
        title: 'Error creating record',
        message: error.body.message,
        variant: 'error',
      }),
    );
  }).then(() => {
    const saveEvent = new CustomEvent('save', {
      detail: {
        id: this.savedRecord
      },
      bubbles: true
    });
    this.dispatchEvent(saveEvent);
    this.closeModal();
  })

}

The record does save as I mentioned, but the two fields that do not have variables assigned when created do not keep their values. It's not as simple as assigning variables and putting specific code in the HTML since the HTML is iterating over the fields, as opposed to having each one specified.

1 Answer 1

3

Without seeing all of your code, I can't answer with complete certainty, but I have an idea.

In lightning Web Components, as opposed to Aura, variable binding in inputs <lightning-input....> is one way, meaning just assigning value={var} doesn't cut it. This is due to shadow DOM. When using inputs in LWC, we must use event handlers to get the value of the input.

So rather than just

<lightning-input type="text" label="My Input" value={myVar} ></lightning-input>

We'd do:

<lightning-input type="text" label="My Input" value={myVar} onchange={handleChange}></lightning-input>

with this in the controller:

handleChange(ev){ 
    this.myVar = ev.detail.value;
}

For specific inputs, see the docs here

1
  • Thanks, your references show how to do this properly. I was really confused because the original code I was given was attempting to use a generic set fields and an object name, then iterate over it in the modal. Which is of course not working. It's clever but I think I need to re-write it using your pattern above and just make each modal specific to each object. Thanks.
    – ScottH7a9
    Dec 22, 2019 at 15:38

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.