k-ng-model required w/Angular Validation

6 posts, 0 answers
  1. Elliot
    Elliot avatar
    59 posts
    Member since:
    May 2012

    Posted 18 May Link to this post

    I have a date picker using k-ng-model with the required attribute and am using Angular validation.  Unfortunately, it is not being marked as invalid with a required error.  How do I make this happen?
  2. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 20 May Link to this post

    Hello Elliot,

    Currently, the `k-ng-model` directive is not integrated with the ngForm directive. That is why the validation will not be triggered on model update.

    The only solution for now is to replace the `k-ng-model` directive with the `ng-model`, as it is integrated with the form.

    Regards,
    Georgi Krustev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Elliot
    Elliot avatar
    59 posts
    Member since:
    May 2012

    Posted 24 May in reply to Georgi Krustev Link to this post

    I am having a lot of issues with the datepicker.  k-ng-model doesn't work with angular validation (which it absolutely should since it is supposed to support angular) and when I try and use ng-model the date is not being displayed in the control.

    Here is how I have it declared in the html: 

    <input kendo-date-picker name="trainingDate" ng-model="training.trainingDate"  k-max="today" required />

    If I display the value of {{training.trainingDate}} it appears as: "2016-05-01T04:00:00.000Z"

    Attached is what the value appears in chrome debugger.

    Why is the datepicker not showing the date?

  5. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    349 posts

    Posted 26 May Link to this post

    Hello Elliot,

    The described behavior is caused by using ng-model instead of k-ng-model (as described in the following section of our documentation):

    http://docs.telerik.com/kendo-ui/AngularJS/introduction#scope-bindings

    On the other hand, ng-model is required for using the built-in angular validation. The alternative I can suggest is using the Kendo UI Validator instead:

    http://demos.telerik.com/kendo-ui/validator/angular

    I hope this helps.

    Regards,
    Dimiter Topalov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Elliot
    Elliot avatar
    59 posts
    Member since:
    May 2012

    Posted 26 May in reply to Dimiter Topalov Link to this post

    I do not want to use the kendo validator.

    Am I understanding you correctly that the date picker doesn't work with angular validation?  If that is the case the kendo controls aren't angular controls at all.  

    Why would they be designed like this?  I mean you are marketing them as angular directives but they don't even work with angular validation?  Very frustrating.

     

  7. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    349 posts

    Posted 30 May Link to this post

    Hi Elliot,

    In general, ng-model binding does not integrate so good with third-party widgets (such as Kendo UI widgets), as it does not handle dates' two-way binding very well. The differences between ng-model and k-ng-model are explained in the following section of our documentation, and this is the reason k-ng-model was introduced:

    http://docs.telerik.com/kendo-ui/AngularJS/introduction#scope-bindings

    If you do not want to use the Kendo UI Validator, you can use the following workaround to make ng-model work with the real value of the Kendo UI DatePicker, that is a JavaScript Date object:

    http://dojo.telerik.com/Uwudu/2

    The key points are handling the change event of the DatePicker, in which the scope variable is updated with the Date object representation of the stringified date, as well as configuring the parseFormats option so that the widget recognizes the string as a valid date format, and knows how to parse it.

    I hope this helps.

    Regards,
    Dimiter Topalov
    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