I trying to validate ui:inputDate
along with lightning:input
of type Date. But I'm getting the error as
Action failed: c:DateValidation$controller$doAction [inputCmp.showHelpMessageIfInvalid is not a function]
when I try to validate ui:inputDate
.
Here is my code
Component
<aura:component>
<aura:attribute name="today" type="String" default=""/>
<aura:attribute name="today1" type="String" default=""/>
<aura:attribute name="date1" type="Date" default=""/>
<aura:attribute name="date2" type="Date" default=""/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<ui:inputDate aura:id="expdate" required = "true" label="Today's Date" format ="MM/DD/YY" class="field" value="{!v.date1}" displayDatePicker="true" />
<ui:inputDate aura:id="expdate" required = "true" label="Today's Date" format ="MM/DD/YY" class="field" value="{!v.date2}" displayDatePicker="true" />
<lightning:input type="date" required = "true" label="Date1" aura:id="expdate" name="today" value="{!c.today}"/>
<lightning:input type="date" required = "true" label="Date2" aura:id="expdate" name="today1" value="{!c.today1}"/>
<ui:button class="btn" label="Submit" press="{!c.doAction}"/>
Controller
({
doAction : function(component, event, helper) {
var allValid = component.find('expdate').reduce(function (validFields, inputCmp) {
inputCmp.showHelpMessageIfInvalid();
return validFields && inputCmp.get('v.validity').valid;
}, true);
if (allValid) {
alert('All form entries look valid. Ready to submit!');
} else {
alert('Please update the invalid form entries and try again.');
}
},
doInit : function(component,event,helper){
var today = new Date();
component.set('v.date1', today.getFullYear() + "-" + (today.getMonth() + 1) + "-" + today.getDate());
component.set('v.date2', today.getFullYear() + "-" + (today.getMonth() + 1) + "-" + today.getDate());
}
})
ui:inputDate
doesn't exposed ashowHelpMessageIfInvalid
method thats why you are getting a error. – vignesh Feb 12 '19 at 12:26