Make field required with lightning:inputField and lightning:recordEditForm

Question

There is no setting for the lightning:inputField to make it required.

idea: https://success.salesforce.com/ideaView?id=0873A000000lKNbQAM docs: https://developer.salesforce.com/docs/component-library/bundle/lightning:inputField/specification

My lightning component is dynamic with all of the fields being passed through. I cannot find a way to make required fields required.

<lightning:recordEditForm objectApiName="{! v.sObjectName }"
                          recordId="{! v.recordId }"
                          recordTypeId="{! v.recordTypeId }"
                          class="slds-card slds-p-around_medium"
                          onsuccess="{! c.onsuccess }"
                          onsubmit="{!c.handleSubmit}"
                          >
 <aura:iteration items="{! column.Fields }" var="field">
 <lightning:inputField  fieldName="{! field.APIName }"  class="{!'slds-p-top_small slds-m-top_medium '+field.Behaviour}" disabled="{! field.Behaviour=='Readonly'}" />
</aura:iteration>
</lightning:recordEditForm> 

Any ideas on how to make an onsubmit function that can loop through N number of input fields and make them required?

Answer 1

OOTB, lightning:inputfield handles field validations that are configured through your object's field settings, so that would be the first place you want to check in order to make your fields "required".

If for whatever reason, the above is not an option (eventhough it should be), then adding an aura:id that identifies all your lighting:inputfield fields will enable you to simply 'fetch' all of them with component.find('yourAuraId') which returns an array you can iterate over to perform your field validations.

You can then bind your validation method to the onsubmit event and do a simple check for blank fields:

isFormValid: function (cmp, evt, helper) {
    const requiredFields = cmp.find('yourAuraId') || [];
    var isValid = true;
    requiredFields.forEach(e => {
        if (e.get('v.value')=='' || e.get('v.value').trim().length==0 ) {
            isValid = false;
        }
    });

    return isValid;
},

based on the what is returned by the validation method, you can proceed with submitting the form or not with event.preventDefault(); // stop the form from submitting

Answer 2

Winter20 , required attribute available for lightning:inputField from winter 20

Answer 3

Slightly modified version of @glls answer:

isFormValid: function (component) {
    return (component.find('requiredField') || [])
        .filter(function (i) {
            var value = i.get('v.value');
            return !value || value == '' || value.trim().length === 0;
        })
        .map(function (i) {
            return i.get('v.fieldName');
        });
}

Then use as:

    var invalidFields = helper.isFormValid(component);
    if(invalidFields && invalidFields.length > 0){
        helper.reportUserError(
            'Please complete all required fields',
            'Incomplete: '+ invalidFields.join(', ')
        );
        event.preventDefault();
        return;
    }

Where reportUserError is just a wrapper for error toast (or whatever logic you wanna do).

Unfortunate thing is it returns list of field API names - not sure is possible to get label.

What you'll also find probably useful is how to add a typical "required" asterisk to you component - here.

In the end your markup will be like this:

<lightning:inputField
                                class="customRequired"
                                aura:id="requiredField"
                                fieldName="Foo__c"/>