Question:

Using a custom lightning component within a form as an input field

Arya: 5 days ago

Newbie to salesforce. We have built a multi-select lightning component that allows the users to select multiple values (based on auto complete). Example allows user to select multiple contacts from the contacts object.

How can I use this as an input field within a form.

From the salesforce example we have:

 <form class="slds-form--stacked">          
        <lightning:input aura:id="expenseform" label="Expense Name"
                         name="expensename"
                         value="{!v.newExpense.Name}"
                         required="true"/> 
        <lightning:input type="number" aura:id="expenseform" label="Amount"
                         name="expenseamount"
                         min="0.1"
                         formatter="currency"
                         step="0.01"
                         value="{!v.newExpense.Amount__c}"
                         messageWhenRangeUnderflow="Enter an amount that's at least $0.10."/>

       ***//our custom component which we would need to treat one of the fields in the save expense form***
       <c:publisherMultiSelect objectAPIName="Publisher__c" label="Publisher Name"/>

        <lightning:button label="Create Expense" 
                          class="slds-m-top--medium"
                          variant="brand"
                          onclick="{!c.clickCreate}"/>
    </form>

How would use capture the input in the custom component on the controller side when save is clicked.

Answer:
Isla: 5 days ago

Lightning supports 2-way binding where if you define an attribute in your component called "value" you can bind that to an attribute of the containing component:

<aura:attribute name="contacts" type="Contact[]"/>

....

<c:YourComponent value="{!v.contacts}" .../>

When your component is first displayed it will have access to the contacts defined in the containing component and when your component changes the values they will also change in the containing component.

But for your example, you also need to think about the data model in that you are allowing multiple contacts to be selected so you will have to add logic that sets the lookup fields appropriately on the contact objects or in an association object.