In this plunk I have an Angular UI date picker and a message that should be shown only when the date is valid. The problem is that the message is always shown, even when form.$valid
is true. Note that if you enter a valid or invalid date and then click on Validate
, an alert will display correctly that the date is valid or invalid respectively.
Why is the validation message shown all the time, even when form.$valid
is true?
Javascript
var app = angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
app.controller('ctl', function ($scope) {
$scope.dtFrom = new Date ();
$scope.config1 = {};
$scope.config1.opened = false;
$scope.open1 = function(event){
event.preventDefault();
event.stopPropagation();
$scope.config1.opened = true;
};
$scope.validate = function(form){
if (!form.$valid) {
alert("Date invalid");
}
else {
alert("Date valid");
}
}
});
HTML
<div ng-controller="ctl">
<form name="form1" ng-submit="validate(form1)" novalidate>
<p class="input-group" name="dtFrom" style="width:160px;margin-bottom:0px;">
<input type="text" class="form-control" ng-model="dtFrom"
is-open="config1.opened" uib-datepicker-popup="MM-dd-yyyy"
close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open1($event)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</p>
<span ng-show="!form1.dtFrom.$valid">Invalid Date</span>
<br/>
<button type="submit">Validate</button>
</form>
</div>
You should create name for the input
<input type="text" class="form-control" ng-model="dtFrom"
is-open="config1.opened" uib-datepicker-popup="MM-dd-yyyy"
close-text="Close" name="date" />
<span ng-show="!form1.date.$valid">Invalid Date</span>
Here is plnkr