I've just written a custom directive to use pikaday.js in my app.
I set everything's up and it's almost doing what I want,but I have a big problem in validation.
In my directive I can update both model and view value correctly, but the $required property associated to the input name doesn't change.
Here's my directive code:
appShared.directive('pikadayDatepicker', [function () {
return {
restrict: 'A',
scope:{
ngModel: '='
},
link: function (scope, element, attrs) {
var input = element[0];
var updateFieldFunction = function (date) {
scope.ngModel = date;
scope.$apply();
};
var picker = new Pikaday({
field: input,
defaultDate: new Date(),
setDefaultDate: true,
onSelect: updateFieldFunction,
minDate: moment(attrs.minDate, "DD/MM/YYYY hh:mm:ss").toDate(),
format: attrs.format
});
}
}
}
]);
And this is how I call my directive in template:
<form name="newForm" class="ng-invalid ng-invalid-required ng-dirty ng-valid-editable" novalidate="">
<div class="form-group">
<label for="Destinazione">Destinazione</label>
<br>
<input class="form-control ng-dirty ng-valid-required ng-valid ng-valid-editable" data-ng-class="{has_error: newForm.id.$invalid && newForm.id.$dirty }" required="true" data-typeahead-min-length="3" data-typeahead-editable="false" data-typeahead="dest as dest.Label for dest in iddestinations('/api/GetDestinations/?term=', 'HTL', $viewValue)" placeholder="Inserisci una destinazione..." autocomplete="off" name="id" data-ng-model="iddestination" type="text">
<div class="help-block ng-hide" data-ng-show="newForm.id.$invalid && newForm.id.$dirty">
<span class="help-block ng-hide" data-ng-show="newForm.id.$error.required">Inserisci una destinazione!</span>
<span class="help-block ng-hide" data-ng-show="newForm.id.$error.editable">Inserisci una destinazione tra quelle disponibili!</span>
</div>
</div>
<div class="form-group">
<label for="Data_partenza">Data partenza</label>
<br>
<div class="input-group date">
<input class="form-control ng-isolate-scope ng-scope ng-pristine ng-invalid ng-invalid-required" data-ng-class="{has_error: newForm.beginDate.$invalid && newForm.beginDate.$dirty}" required="required" data-pikaday-datepicker="" data-min-date="05/11/2013 00:00:00" data-format="DD/MM/YYYY" name="beginDate" data-ng-model="params.beginDate" type="text">
<span class="input-group-btn">
<button class="btn btn-default" type="button" data-toggle="datepicker">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</div>
<div class="help-block">
<span class="help-block" data-ng-show="newForm.beginDate.$error.required">Inserisci una data valida!</span>
<h5 class="ng-binding">"2013-11-27T23:00:00.000Z"</h5>
</div>
</div>
<div class="clearfix">
<a disabled="disabled" class="btn btn-primary pull-right" data-ng-disabled="newForm.$invalid" data-ng-click="SendParams()">Continua</a>
</div>
</form>
Do you know what causes this problem? How may I fix it?
name
– charlietfl Nov 4 '13 at 21:19ng-required
. try that. You've created isolated scope and that is causing issues. Could remove the directive scope also – charlietfl Nov 5 '13 at 13:12