AngularJS required input, set with code, invalid

Question

I have a text input that is set to required. The field is a date range picker. When the code for the date range picker enters the text, angular is not recognizing the input as being filled. It is still casing a validation error saying the field is required. Any ideas? I tried $setValidity('required',true); No luck there.

I am using this date range picker: Link

Here's the code. First on the html side, my input:

<input class="form-control" type="text" name="daterange" id="daterange" ng-model="daterange" placeholder="Pick A Date"/>

Then on the javascript side I setup the input as a daterange picker

$('input[name="daterange"]').daterangepicker({
    "autoApply": true,
    "autoUpdateInput": false
});

$('#daterange').on('apply.daterangepicker', function(ev, picker) {
    $('#daterange').val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
});

$('#daterange').on('cancel.daterangepicker', function(ev, picker) {
    $('#daterange').val('');
});

I am using some angular on the HTML side to show all my form errors

<ul>
    <li ng-repeat="(key, errors) in requestForm.$error track by $index"> <strong>{{ key }}</strong> errors
        <ul>
            <li ng-repeat="e in errors">{{ e.$name }} has an error: <strong>{{ key }}</strong>.</li>
        </ul>
    </li>

If I manually type in the field it will validate. But using the date range picker it does not.

I think you will have to use $watch to let angular know that scope has been changed. Since you are updating value of element with jQuery, angular will not be aware of this. stackoverflow.com/questions/22002956/… and henriquat.re/directives/… — Kalpesh Patel
– Kalpesh Patel, Commented Mar 5, 2017 at 7:02

DasPete · Accepted Answer · 2017-03-06 22:47:11Z

0

Well I finally figured this out. The issue is that the daterange picker wasn't setting the value the angular way. It was doing it with jQuery:

$('#daterange').val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));

By using the same call back from daterange picker but using the angular way to set the value:

$scope.daterange = (picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));

the validator picks up on it. Thanks for the help everyone

answered Mar 6, 2017 at 22:47

DasPete

8512 gold badges19 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS required input, set with code, invalid

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related