1

I'm working on a toggle switch for a lightning:input password field that will allow users to view the password they've entered.

<lightning:input type="password" aura:id="passwordInput" name="password" label="password" />

<button type="button" id="btnPreviewToggle" onclick="{!c.togglePassword}">show</button>

In regular JavaScript I can do this by changing the type of the input from "password" to "text". However, in my Controller, the same kind of logic doesn't work:

togglePassword : function(component, event, helper) {
    var pwdInput = component.find("passwordInput");

    if (pwdInput.type === "password") {
        pwdInput.type = "text";
    } else {
        pwdInput.type = "password";
    }
}

How can I change the type value of lightning:input?

1

Seems like you cannot use type here to toggle this. While trying to do so, I encountered an error which said as it is not extensible as below:

Cannot add property type, object is not extensible

A way to do this could be as below (you may need to modify it per your need, this was just a quick test). Define a boolean variable and another text type input and toggle between those on click of the button. Something as below:

Component:

<aura:attribute name="showDiv" type="Boolean" default="false" />

<aura:if isTrue="{!v.showDiv == false}">
    <lightning:input type="password" aura:id="passwordInput" name="password" label="password" />
</aura:if>
<aura:if isTrue="{!v.showDiv == true}">
    <lightning:input type="text" aura:id="passwordText" name="passwordTxt" label="passwordTxt" />
</aura:if>

<lightning:button variant="base" label="Show Password" title="Show Password" onclick="{! c.togglePassword }"/>

JS Controller:

togglePassword : function(component, event, helper) {
    var bool = component.get("v.showDiv");
    var val = component.find("passwordInput").get("v.value");
    if(bool) {
        component.set("v.showDiv", false);
    } else {
        component.set("v.showDiv", true);
        component.find("passwordText").set("v.value", val);
    }
},
  • This looks great, thank you! How would you then change the toggle back, i.e., after showing the password, back to hiding it? – Matt Smith Aug 23 '18 at 0:36
  • I haven’t really tried it out completely but having a reverse implementation to do the same should help. You show say another button altogether and then on click of that show the hidden components back, something similar to this. – Jayant Das Aug 23 '18 at 0:45
0

How about something like:

<aura:attribute name="inputType" type="String" default="password"/>
<!-- <aura:attribute name="inputType" type="String" default="text"/> -->
<lightning:input type="{!v.inputType}" aura:id="passwordInput" name="passwordInput" label="{!v.inputType}" value="myPassw0rd"/>

and you toggle the value of inputType attribute from your toggle method?

  • 1
    Seems you cannot toggle the type attribute. – Jayant Das Aug 17 '18 at 17:35

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.