Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

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  &amp;&amp; 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 &amp;&amp; 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 &amp;&amp; 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?

share|improve this question
    
What about your html5 mode for the app. and try using required="required". There is no issue with the code segment as such –  vipulsharma Nov 4 '13 at 17:18
    
does form have a name –  charlietfl Nov 4 '13 at 21:19
    
@vipulsharma I've just tried that, but it seems not fixing it. Thank you so much for now anyway –  tommaso capelli Nov 5 '13 at 8:32
    
@charlietfl yes, it does. I'll add more HTML on the question text. Thank you so much for now anyway –  tommaso capelli Nov 5 '13 at 8:34
    
doesn't look like you are using ng-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

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.