2

This is a general question aimed at finding best approach to do some task. Now I interested in how should I get values from inputs in lightning components. Let's say I have a component:

Example.cmp

<aura:component controller="ExampleController">
  <aura:attribute name="exampleDatetime" type="DateTime" access="private" />
  <aura:attribute name="isVisible" type="Boolean" default="false" access="private" />

  <aura:if isTrue="{! v.isVisible }">
    <lightning:input
      type="datetime"
      aura:id="exampleDatetimeInput"
      name="exampleDatetimeInput"
      label="Example Datetime Input"
      value="{! v.exampleDatetime }"
    />
  </aura:if>

  <lightning:button label="Example" onclick="{! c.onClick }" />
  <lightning:button label="Show Input" onclick="{! c.onClickShowInput }" />
</aura:component>

ExampleController.js

({
    onClick: function(component, event, helper) {
        const action = component.get("c.exmapleServerAction");
        const data = component.get("v.exampleDatetime");
        // OR
        // const data = component.find("exampleDatetimeInput").get("v.value");
        action.setParam("exmapleServerDataParam", data);

        action.setCallback(this, function(response) {
            // skipped for brevity
        });
        $A.enqueueAction(action);
    },
    onClickShowInput: function(component, event, helper) {
        // Toggle visibility
        const isVisible = component.get("v.isVisible");
        component.set("v.isVisible", !isVisible);
    }
})

Should I event create this exampleDatetime attribute at all if the only thing I need is actual value provided by user in the input field? This attribute seems redundant so I feel it can be removed, but I am not sure if this is a good practice to access component's value directly though?

2

It kinda depends what you wanna do and how you doing it.

There can't be 2 aura attributes with the same name so component.get(); will always return a unique individual instance/value.

But more than 1 component can have same aura:id (in iterator or loop) , so component.find() can return an individual component or a list you can iterate over.

That being said, as component.find() returns the component, you can access attributes which you not defined in markup.

eg in your case you can get label , validity of ligthning:input component.find("exampleDatetimeInput").get('v.validity);

And even call aura:method of that component(Standard or custom)

component.find("exampleDatetimeInput").showHelpMessageIfInvalid();

So in broader expect, component.find() can do everything that component.get() can.

src: component.find() vs aura:attribute

  • That's a good explanation of how these access methods differ. I'd also want to understand which is appropriate in a general case. E.g. what is the reason to create attributes in parent controller that hold values of the child components, if you can access component value directly by component.find("exampleDatetimeInput").get("v.value");. This would be less markup and code in controller. – Eduard Jun 4 at 9:13
  • What if you want to pass the attribute from parent component to child component and then show it in child component? in that case you have to use attribute, It genuinly depends on the use case. As updating that attribute will auto-update value in parent. – Pranay Jaiswal Jun 4 at 9:14

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.