0

My problem is that it work to set a setCustomValidity on an Lighning:Input element like described here: Solved

The problem is that it is not possible to reset this value onces it is set. Even if I get the correct values the error message do not dissapear if the value was once set to a wrong one.

here is my js code:

var lines = component.get('v.lines');
var inputField = event.getSource();
var inputvalue = event.getSource().get("v.value");

if (inputvalue < lines[0].kalabis__DeliveryDate__c) {
    console.log('its to small');
    inputField.setCustomValidity('wrong');
} else {
    console.log('its ok');
    inputField.setCustomValidity('');
    component.set('v.isLoaded', false);
    component.set('v.isLoaded', true);
}

inputField.reportValidity();

No idea if there is a possibilitty to reset this value but it seems to me very weird.

  • Did you get a solution for this? I am also facing the same issue. – Saroj Bera May 16 at 15:32
1

Workaround

Hi @utm, I've found workaround. If you wrap your component inside IF statement and switch on and off, it will force component to re-render.

With this hack it will work just fine.

Example

    <aura:if isTrue="{!v.isLoaded}">
        <lightning:input ... />
        <aura:set attribute="else">
            loading...
        </aura:set>
    </aura:if>

Now you need to call component.set('v.isLoaded', false); and then component.set('v.isLoaded', true); forcing lightning:input to re-render.

Message will disappear.

Hope it helps,

Daniel

  • Very good idea! Thx. What's still missing is the following: 3 lines with dates. You change line 2 to error state -> Shows error, you change line 3 to error state -> Show error. Everything good for now. But if you now change just one of those lines (e.g. 2nd one) to a "good" state both error states (line 2 and 3) will be cleared – utm Aug 28 '18 at 13:58
  • Pulled from documentation: reportValidity(): If the input is invalid, displays the error and returns false. If the input is valid, clears any displayed error and returns true. So, please call reportValidity() every time, not only when displaying error. – Daniel Horký Aug 28 '18 at 14:19
  • I do this. I have updated my code so please take a look. The problem here is still that the lightning:input(s) are in a repeat block. So for one single line your solution works perfectly. But not if you have multiple lines. Or am I missing something? – utm Aug 28 '18 at 14:31
  • You need to save it with reportValidity(). Put it before false/true after line 10. – Daniel Horký Aug 28 '18 at 15:32
0

In the [docs][1] they use an example like this:

({
    register : function(component, event) {
        var inputCmp = component.find("inputCmp");
        var value = inputCmp.get("v.value");
        // is input valid text?
        if (value === “John Doe”) {
            inputCmp.setCustomValidity("John Doe is already registered”);
        } else {
            inputCmp.setCustomValidity(""); // if there was a custom error before, reset it
        }
        inputCmp.reportValidity(); // Tells lightning:input to show the error right away without needing interaction
    }
})

So I would suggest to get the component from an aura:id like that:

var inputCmp = component.find("inputCmp");

and in your markup - set the component with the aura:id:

<lightning:input aura:id="inputCmp" type="date" name="date" class="nolabel" value="{!line.CustomField__c}" messageWhenBadInput="Date must be newer than..." onchange="{!c.checkIfValid}" />
  • But this is exactly what I do. And I also took the example code but it is not working – utm Aug 26 '18 at 14:58
  • From the code you uploaded - it does not seem to look like you did it in the same way, if you did, please update the code so we can help you on your problem – Itai Shmida Aug 27 '18 at 16:37
  • 1
    Hi @ItaiShmida. You can get component by calling event.getSource(). Problem me and also @utm are facing is that inputCmp.setCustomValidity(""); don't do anything. The error won't go away, but field will be valid. – Daniel Horký Aug 28 '18 at 11:20
  • @DanielHorký thats exactly what I mean. I think it has something to do with the render process. – utm Aug 28 '18 at 11:22
  • To add here. It doesn't have any difference using event.getSource() or component.fing('auraIdOfField') – Daniel Horký Aug 28 '18 at 11:32

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.