function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Bertrand DBBertrand DB 

ui:inputSelect as required on a Lightning component

Hello,
I'm building a Lighting component. It has multiple form fields.
One is ui:inputSelect, with a dynamic picklist (that we get from Apex).

I would like to make this field as mandatory, I tried to add required="true", but it doesn't work. I think I missing something on how this works.
Can you give me some insights?

My Component:
<aura:component controller="MyController" implements="force:lightningQuickAction,force:hasRecordId,lightning:availableForFlowScreens" >
    <aura:handler name="init" action="{!c.init}" value="{!this}" />
    <aura:attribute name="AccountID_flow" type="String" access="global" />

        <form aura:id="addressForm">
            <div class="slds-form--compound"> 
                <div class="slds-grid">
                    <ui:outputText aura:id="blankSpace" value=" " class="slds-form-element slds-size--1-of-2 slds-hide" />
                    <div class="slds-form-element slds-size--1-of-2">
                        <label class="slds-form-element__label" for="addresstype">Address Type</label>
                        <div class="slds-form-element__control">
                            <ui:inputSelect class="slds-select slds-scrollable--y multiselect marginLeft" aura:id="addresstype" multiple="true" required="true"/>                           
                        </div>
                    </div>
            	</div>
            </div>
        </form>
</aura:component>

Thanks in advance!
Best Answer chosen by Bertrand DB
Bertrand DBBertrand DB
A solution can be to simply replace comma by semicolon, in javascript.

First, get the values:
component.find('addresstype').get('v.value')

We convert the list with toString(), and replace the comma with semicolon with replace(/,/g , ";")

At the end it looks like:
component.find('addresstype').get('v.value').toString().replace(/,/g , ";")

 

All Answers

Shruti SShruti S
I would recommend you use the lightning base components going forward. Have you tried this = https://developer.salesforce.com/docs/component-library/bundle/lightning:select/example ?
Bertrand DBBertrand DB
I forgot to say, I need to be able to select multiple items in the picklist... And the lightning base component "Select" doesn't seem to support this.

Maybe I could use Dualistbox https://developer.salesforce.com/docs/component-library/bundle/lightning:dualListbox/example (https://developer.salesforce.com/docs/component-library/bundle/lightning:dualListbox/example" target="_blank)

But my issue is that it doesn't return really the same thing as ui:inputselect.

ui:inputselect returns: "Value1; Value2Value3"
dualListbox reutrns: "Value1, Value2, Value3"

And it breaks my process later, when I need to reuse these values.
Bertrand DBBertrand DB
A solution can be to simply replace comma by semicolon, in javascript.

First, get the values:
component.find('addresstype').get('v.value')

We convert the list with toString(), and replace the comma with semicolon with replace(/,/g , ";")

At the end it looks like:
component.find('addresstype').get('v.value').toString().replace(/,/g , ";")

 
This was selected as the best answer