and onchange method

lightning-aura-componentslightning-design-systemlightning-web-components

I'm a newbie in Aura Components and LWC. I was scrolling through the specifications <ui:inputText/> (https://developer.salesforce.com/docs/component-library/bundle/ui:inputText/specification) and <lightning-input></lightning-input> (https://developer.salesforce.com/docs/component-library/bundle/lightning-input/specification) but I can not find the onchange or keyup methods, although they are being used as I found here for example:

<ui:inputText aura:id="lookup-field"class="slds-input slds-combobox__input slds-input-has-icon_left" 
updateOn="keyup"
value="{!v.searchText}"
keyup="{!c.onKeyUp}"
placeholder="{!'Search ' + v.objectLabelPlural + '...'}"
blur="{!c.onBlur}"
focus="{!c.onFocus}"
disabled = "{!v.disabled}"
/>

What is the reason behind the keyup or onchange event attributes missing in the specifications?

Best Answer

First, a note: ui components are deprecated. Do not use them in new code. Second, the documentation mostly only calls out events that are implemented as a CustomEvent dispatch. All standard DOM events are still triggered and still behave as normal, with the single difference being that target/currentTarget will be set to the closest Shadow DOM boundary to avoid leaking internal structures of components. DOM events otherwise behave exactly as you'd expect them to in plain HTML.

Related Solutions

[SalesForce] Make field required with lightning:inputField and lightning:recordEditForm

OOTB, lightning:inputfield handles field validations that are configured through your object's field settings, so that would be the first place you want to check in order to make your fields "required".

If for whatever reason, the above is not an option (eventhough it should be), then adding an aura:id that identifies all your lighting:inputfield fields will enable you to simply 'fetch' all of them with component.find('yourAuraId') which returns an array you can iterate over to perform your field validations.

You can then bind your validation method to the onsubmit event and do a simple check for blank fields:

isFormValid: function (cmp, evt, helper) {
    const requiredFields = cmp.find('yourAuraId') || [];
    var isValid = true;
    requiredFields.forEach(e => {
        if (e.get('v.value')=='' || e.get('v.value').trim().length==0 ) {
            isValid = false;
        }
    });

    return isValid;
},

based on the what is returned by the validation method, you can proceed with submitting the form or not with event.preventDefault(); // stop the form from submitting

[SalesForce] Lightning Web Component Custom Errors

The description for the method setErrors on lightning-input-field mentions:

Reserved for internal use.

I would imagine we cannot use any such attribute/method if it is reserved for internal use.

Best Answer

Related Solutions

[SalesForce] Make field required with lightning:inputField and lightning:recordEditForm

[SalesForce] Lightning Web Component Custom Errors

Related Topic