angularjs, bootstrap, validator and datetime

5 posts, 0 answers
  1. Alistair
    Alistair avatar
    8 posts
    Member since:
    May 2014

    Posted 10 Sep 2014 Link to this post

    Hi,

    When a form loads we want to highlight which fields are required fields by changing the colour of the label.  If you look at the attached image SoureRequiredAuthorNotRequired.PNG you can see the Source field is highlighted in red as it is a required field.  When a value is entered for the Source the red highlighting disappears.

    To do this we have used:

    <div class="form-group" ng-class="{'has-error' : editForm.Source.$error.required}">
        <label for="Source" class="control-label required">Source</label>
        <input type="text" id="Source" name="Source" ng-model="vm.data.record.source" class="form-control input" required />
    </div>
     
    <div class="form-group">
        <label for="Author" class="control-label">Author</label>
        <input type="text" id="Author" name="Author" ng-model="vm.data.record.author" class="form-control input" />
    </div>

    We have now added in a Kendo date picker and hoped this would work in the same way:

    <div class="form-group" ng-class="{'has-error' : editForm.PressCuttingDate.$error.required}">
        <label for="PressCuttingDate" class="control-label required">Date</label>
        <input type="date" kendo-date-picker id="PressCuttingDate" name="PressCuttingDate" k-ng-model="vm.data.record.pressCuttingDate" k-format="'dd/MM/yyyy'" style="width: 100%" required />
    </div>
     
    <div class="form-group" ng-class="{'has-error' : editForm.Source.$error.required}">
        <label for="Source" class="control-label required">Source</label>
        <input type="text" id="Source" name="Source" ng-model="vm.data.record.source" class="form-control input" required />
    </div>
     
    <div class="form-group">
        <label for="Author" class="control-label">Author</label>
        <input type="text" id="Author" name="Author" ng-model="vm.data.record.author" class="form-control input" />
    </div>

    Unfortulately this does not work.  It seems that to validate a kendo date picker you have to use the kendo validator.  Is that correct?

    Assuming that is correct, we added the following code:

    <form name="editForm" novalidate kendo-validator="vm.formValidation">

    to use the kendo validator.  Looking at the documentation you have a validateInput function which validates just one field:

    http://docs.telerik.com/kendo-ui/api/javascript/ui/validator#methods-validateInput

    We then tried:

    <div class="form-group" ng-class="{'has-error' : vm.formValidation.validateInput($('input[name=PressCuttingDate]')) }">
        <label for="PressCuttingDate" class="control-label required">Date</label>
        <input type="date" kendo-date-picker id="PressCuttingDate" name="PressCuttingDate" k-ng-model="vm.data.record.pressCuttingDate" k-format="'dd/MM/yyyy'" style="width: 100%" required />
    </div>

    Which did not work.  validateInput only seems to work if it used as part of a button click.  Is this correct?

    How can I get this to work so that the red highlighting appears when nothing has been entered and disappears when a value has been entered (without the user clicking on a save button etc)?

    Many thanks
  2. Alistair
    Alistair avatar
    8 posts
    Member since:
    May 2014

    Posted 11 Sep 2014 in reply to Alistair Link to this post

    Things have improved with AngularJS 1.3 RC 1 where this is now possible:

    <div class="form-group" ng-class="{'has-error' : editForm.PressCuttingDate.$error.required || editForm.PressCuttingDate.$error.date}">
        <label for="PressCuttingDate" class="control-label required">Date</label>
        <input type="date" kendo-date-picker id="PressCuttingDate" name="PressCuttingDate" ng-model="vm.data.record.pressCuttingDate" style="width: 100%" k-format="'dd/MM/yyyy'" required />
    </div>

    along with:

    <li ng-show="editForm.PressCuttingDate.$error.required">Please enter the Date.</li>
    <li ng-show="editForm.PressCuttingDate.$error.date">Please enter a valid Date.</li>

    which is great.  Unfortunately with AngularJS 1.3 RC1 you cannot set the value of the date picker.  If you run this example:

    <!DOCTYPE html>
    <head>
        <title></title>
     
        <!--<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.1/angular.min.js"></script>-->
    </head>
    <body>
        <div id="example" ng-app="KendoDemos">
            <div class="demo-section k-content" ng-controller="MyCtrl">
                <div class="box-col">
                    <h4>Select date:</h4>
                    <input kendo-date-picker ng-model="dateString" type="date" k-format="dd/MM/yyyy" />
     
                    <pre>
                        dateString: {{ dateString }}
                    </pre>
                </div>
     
                <script>
                    angular.module("KendoDemos", ["kendo.directives"]).controller("MyCtrl", function MyCtrl($scope) {
                        $scope.dateString = "10/12/2014";
                    });
                </script>
     
            </div>
        </div>
    </body>
    </html>

    everything works.  Now uncomment the AngularJS 1.3 RC1 script and comment out the other AngularJs script and this no longer works.

    Questions:
    Will the Kendo UI only work with certain versions of AngularJS?  If so, where can I see the list of supported versions of AngularJs for each version of KendoUI?
    Have a done something wrong?
    Is this a bug?

    Thanks for your help.  I would also like to know whether this could ever work as mentioned in the previous post:

    <div class="form-group" ng-class="{'has-error' : vm.formValidation.validateInput($('input[name=PressCuttingDate]')) }">
        <label for="PressCuttingDate" class="control-label required">Date</label>
        <input type="date" kendo-date-picker id="PressCuttingDate" name="PressCuttingDate" k-ng-model="vm.data.record.pressCuttingDate" k-format="'dd/MM/yyyy'" style="width: 100%" required />
    </div>
  3. Kendo UI is VS 2017 Ready
  4. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 12 Sep 2014 Link to this post

    Hi Alistair,

    thank you for bringing this. The Kendo UI AngularJS dependencies are described here. In general, I did not expect that the ng-model binding may break with 1.3 - we will investigate this further and see if this is a regression in Angular or we should fix something on our side. 

    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. Alistair
    Alistair avatar
    8 posts
    Member since:
    May 2014

    Posted 12 Sep 2014 in reply to Petyo Link to this post

    Hi Petyo,

    Thank you for the reply.  Is there any way I can track this issue to see the outcome or would I be better off creating an issue on the Kendo UI GitHub?

    If you can also answer the bit about usinging validateInput mentioned in both previous posts that would be great.

    Many thanks

    Alistair
  6. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 16 Sep 2014 Link to this post

    Hi,

    this is the github issue in question - it turned out to be a breaking change in AngularJS itself. 

    Regarding your validation question - I am not sure how your controller code works (the validateInput method), but in general you may wire up a custom validation logic which checks the value from the widget. 

     
    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready