5

I have an lightning:input like this (already tried with not(v.customAddress)):

<form class="slds-form--inline slds-m-bottom--small">

  <lightning:select
    aura:id="sendTo"
    label="{! $Label.c.Send_To }"
    name="{! $Label.c.Send_To }"
  >
    <option value="{! null }" selected="{! true }">{! 'Select a mail' }</option>

    <aura:iteration items="{! v.addresses }" var="address" >
      <option value="{! address.id }">
              {! join(' ', join(', ',address.street, address.houseNumber), address.postalCode, address.city) }
      </option>
    </aura:iteration>

  </lightning:select>
  <lightning:buttonIcon
    name="Add selected address"
    iconName="utility:add"
    alternativeText="{! 'Select address' }"
    onclick="{! c.selectAddress }"
  />
</form>

<!-- STREET -->
<form class="slds-form--inline slds-m-bottom--small">
    <lightning:input
        aura:id="street"
        type="text"
        label="{! 'Street address' }"
        name="{! 'street' }"
        onchange="{! c.updateAddress }"
        disabled="{! !v.customAddress }"
        value="{! v.address.street }"
        required="{! true }"
    />
</form>

An aura:attributelike this:

<aura:attribute 
  name="customAddress"  
  type="Boolean"  
  default="true"  
  required="false" 
  access="private" 
/>

And a Javascript function in my controller like this:

({

  selectAddress:      function(component, event, helper) {
    const input         = component.find('sendTo'); // A lightning:select
    const addressId     = input.get('v.value'); // The default lightning:option has a {! null } value

    if (addressId && addressId.trim() !== '') {
      component.set('v.address', /* myProcessedObject */);
      component.set('v.customAddress', false); // lightning:input has to be disabled
    } else {
      component.set('v.address', {});
      component.set('v.customAddress', true); // lightning:input has to be enabled
    }

  }

})

The first time my function is called AND component.set('v.customAddress', false); is reached, field is not disabled.

Sometimes, when component.set('v.customAddress', true); is reached, the field is disabled.

Example:

Initial step: Step 1: initial state

I selected the address in the dropdown and clicked + => lightning:inputis field and disabled OK Step 2: I selected the address in the dropdown and clicked +

I selected the null value from the dropdown and clicked + => lightning:inputis cleaned but not enable NOK Step 3: I selected the null value in the dropdown and clicked +

With a different behaviour of the click function:

  selectAddress:      function(component, event, helper) {
    const input         = component.find('sendTo');
    const addressId     = input.get('v.value');

    if (addressId && addressId.trim() !== '') {
      component.find("street").set("v.disabled", true);
    } else {
      component.find("street").set("v.disabled", false);
    }

  }

Answering comment: https://salesforce.stackexchange.com/a/156171/37707:

Default state

Step one: (has to be disabled) Step one

Step two: (has to be enabled) Step two

  • I feel your question lacks input to reproduce the issue. Please add relevant code for eg:how selectAddress is invoked.. – Praveen Jan 16 '17 at 16:05
  • selectAdress is invoked by cliking on a lightning:button. Nothing special except this function called to get the value by getting the component via its aura:id – Simon Placentino Jan 17 '17 at 6:27
  • selectAddress is one such an example that is missing. The important point here is the lightning:select's whose value decides the which logic to execute in if/else; that is missing in the question. What type of options select deals with ? is it array of object or array of string(i.e address). How the data flows in the component?. If you could throws us an minimum code(copy past code) to reproduce the issue in our dev org, then will help us to track the issue down. – Praveen Jan 17 '17 at 6:56
  • Here's my understanding correct me if i'm am wrong. lightning:select is shown which displays addresses as options(list of string as addresses). After selecting the appropriate option, button is clicked to populate the lightning:input box based on the select's value. When none option is selected, the input box is emptied out and disabled. This is what I tired and it worked for me. – Praveen Jan 17 '17 at 7:00
  • I added more code details. @Praveen can you show me ? I don't understand what I did wrong – Simon Placentino Jan 17 '17 at 7:06
0

could you just try this one to disable and enable?

Disable: component.find("street").set("v.disabled", true); 
Enable: component.find("street").set("v.disabled", false); 
0

The following should work. (The readonly attribute behaves like the disabled attribute)

<lightning:input
    aura:id="street"
    type="text"
    label="Street address"
    name="street"
    onchange="{!c.updateAddress}"
    readonly="{!not(v.customAddress)}"
    value="{!v.address.street}"
    required="true"
/>
0

I am not sure if it will work or not, but here is my suggestion:

  1. Remove the default="true" for the "customAddress" Boolean attribute (now the default value is false).
  2. According to above condition change 'disabled="{!v.customAddress }"' for lightning:input and do other changes if needed
  • I faced an issue with default="true" so i am suggesting this. – Praveen Kumar P V V May 24 '17 at 7:31

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.