function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Gopinath418Gopinath418 

how to display error message under a picklist in custom lightning component

I have a lightning component in which all the input fields of an custom object are being shown.
I have to fill all the inputs and submit it.
I have a picklist field and i am showing it in the component as below
 <force:inputField aura:id="tc" value="{!v.obj.picklist_field__c}"/>
how could i set the picklist as required by using above syntax? and i wanted to display error message if you not fill the picklist field.
it's urgent..pls

Thanks,
Gopi
 
Amit Singh 1Amit Singh 1
Hello,

You can use syntax like below I used for validating. You need to write the code into Controller.
  
Note : - contactFirstName is aura id of the component and in your case is tc.
Using this you can set validation for all the components

var validContact = true;
var firstNameField = component.find("contactFirstName");
        if($A.util.isEmpty(firstNameField.get("v.value"))) {
            validContact = false;
            firstNameField.set("v.errors", [{message:"First name can't be blank"}]);
        }
        else {
            firstNameField.set("v.errors", null);
        }

// in last check if the flag is true
if(validContact){
  // put your stuff here..
}
Let me know if this helps :)

Thanks,
Amit Singh
Gopinath418Gopinath418
Hi Amit,
Your code is working for Text,Number input fields.
It is not working for Picklist field.
I want to dispaly error message for Picklist field.

Thanks,
Gopi
Amit Singh 1Amit Singh 1
Gopi,

I am not sure if you have tried this or not but below is working code for me.

-- Component -- 
<div>
        <ui:inputSelect aura:id="pickval">
            <ui:inputSelectOption text="--None--" label="--None--" value="true"/>
            <ui:inputSelectOption text="All Primary" label="All Contacts"/>
            <ui:inputSelectOption text="All Primary" label="All Primary"/>
            <ui:inputSelectOption text="All Secondary" label="All Secondary"/>
        </ui:inputSelect>
        <ui:button label="Validate" press="{!c.validate}"/>
    </div>
-- Controller Method -- 
validate : function(component, event, helper){
	    var firstNameField = component.find("pickval");
        var value = firstNameField.get("v.value");
        alert(value);
        if(value==='--None--') {
            //validContact = false;
            firstNameField.set("v.errors", [{message:"First name can't be blank"}]);
        }
        else {
            firstNameField.set("v.errors", null);
        }

Let me know the outcomes.

Thanks,
Amit Singh
 
Gopinath418Gopinath418
Hi Amit,

By using <ui:inputSelect /> component to am able to display error message for a picklist field.But
I am using <force:inputField /> component to display picklist field and have to display error message on that <force:inputField /> used picklist field.

Thanks,
Gopi
Amit Singh 1Amit Singh 1
Is there any specific reasong to use force:inputField/>.

Also use can use required attribute of this tag.

Visit below link.
https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/aura_compref_force_inputField.htm

Thanks,
Amit Singh
Gopinath418Gopinath418
If you use required attribute then the picklist field is appearing with one selected value as default.(i.e there is no "--none--" picklist value)
if a picklist has two values A and B
if you use force:inputField with out required true then the pick list is appearing with  "--none--"
​if you use force:inputField with required true then the pick list is appearing with  "A"

bydefault my picklist shoud not have any values (it should display "--none--" as default value ).

Thanks,
Gopi