[SalesForce] Get field-name property on onchage event in lightning web component

I want to check on my custom onchange event which fieldName is being changed but when I try to retrieve info via event.detail.fieldName or event.detail.field-name it gives me undefined.

js:

handleInputChange(event){
    var eventName = event.detail.fieldname;
    console.log(eventName);
}

cmp:

<lightning-input-field field-name="AccountId" onchange={handleInputChange}></lightning-input-field>

How can I get field-name value via event in handleInputChange method?

Best Answer

event.detail will give you the data sent in event and event.target (or event.currentTarget) will give you the details about the elements.

Currently you are looking for attributes on source element so you should be using event.target. Below will give you fieldName:

handleInputChange(event) {
    console.log('fieldName => ', event.target.fieldName);
}

Also note

NOTE Property names in JavaScript are in camel case while HTML attribute names are in kebab case (dash-separated) to match HTML standards. In todoApp.html, the item-name attribute in markup maps to the itemName JavaScript property of c-todo-item.

Same applies even for attributes - called from same component JS.

Related Solutions

[SalesForce] Create VisualForce input that uses Lookup popup

Per Jeff Douglas's ROLL YOUR OWN SALESFORCE "LOOKUP" POPUP WINDOW blog post, one way to do this is to simply create a dummy instance of an object that has a relationship with the one you want to perform a lookup on, and then use the appropriate property of that instance as the value of an inputField.

From his post:

MyCustomLookupController

Here's the Apex controller for the record you are either creating or editing. This is an extremely simple controller that just creates a new contact so you can use the lookup for the related account field.
public with sharing class MyCustomLookupController {

  public Contact contact {get;set;}

  public MyCustomLookupController() {
    contact = new Contact();
  }

}
MyCustomLookup

[ ... lots of code omitted; see the original post for full content ... ]
<apex:inputField id="Account" value="{!contact.AccountId}"/>

This is an ugly, hacky solution, and I'd hoped to find something cleaner, but it works. It'd be even uglier if you didn't already have an object with a field of the right type; in that case, I guess you could create a custom object whose entire purpose was to be used for this hack.

[SalesForce] How to pass lightning-input-field value as a parameter to controller class method in Lightning Web Component

Use event.detail.value to get the value updated value inside the change handler.

handlePickChange(event) {
    this.objType = event.detail.value;
    console.log('objType:' + this.objType);
}

Also,

handleChange(event) {
    this.owner = event.detail.value[0];
    console.log('owner:' + this.owner);
}

You need to use this to refer to the member attributes or reactive properties of Lwc.

Like this.objType and this.owner.

refreshObjList({
        objType: this.objType,
        owner: this.owner
    })
    .then(result => {
        this.sObjects = result;
    })
    .catch(error => {
        this.error = error;
    });

Also, if you are passing these attributes as parameters to the wired method, then use '$objType' or '$owner'.

I think there is another problem in your code, it seems like you are just reporting the validity of the input components but actually not checking if the values are valid or not.

Best Answer

Related Solutions

[SalesForce] Create VisualForce input that uses Lookup popup

MyCustomLookupController

MyCustomLookup

[SalesForce] How to pass lightning-input-field value as a parameter to controller class method in Lightning Web Component

Related Topic