How to use Lightning Input type=“text”field and set the value to the field.
I am working on a lightning page where I have to use lightning input type= text. And this value I have to pass JS controller for the validation check. But when I am writing code below it is working fine:
({ clickCreateAccount : function(component, event, helper) { var validExpense = true; var accnme = component.find("fstname"); var aname = accnme.get("v.value"); if (($A.util.isEmpty(aname))){ validExpense = false; accnme.set("v.errors", [{message:"Name can't be blank."}]); } else { accnme.set("v.errors", null); } } })
For the same JS controller once I am writing the code on its throwing error:
This page has an error. You might just need to refresh it. Access Check Failed! AttributeSet.set(): 'errors' of component 'markup://lightning:input {18:0} {fstname}' is not visible to 'markup://c:NewAccount_contact {3:0}'. Failing descriptor: {c:NewAccount_contact}
What is lightning input and how to use it as my input text field and set the value to the field. Please help me in this!
A lightning-input component creates an HTML element. This component supports the following input types: checkbox. checkbox-button. Date. Moving to your question,
Issue lies in these lines, where you are setting v.errors:
if (($A.util.isEmpty(aname))){ validExpense = false; accnme.set("v.errors", [{message:"Name can't be blank."}]); } else { accnme.set("v.errors", null); }
This will work fine as long as you use ui:inputText as this component supports errors attribute, which you can set from client side controller. Refer more on attributes supported by this component on its documentation here.
When you change your code to lightning:input, this component does not support errors attribute. And that is what the error message is complaining about:
'errors' of component 'markup://lightning:input {18:0} {fstname}' is not visible
You will need to handle the error messaging on the component using what is available or by writing some additional validations in your JS controller. Below is a snippet from the documentation for lightning:input, you can refer more on its documentation here. Input Validation Client-side input validation is available for this component. For example, an error message is displayed when a URL or email address is expected