k-ng-model required w/Angular Validation

[Elliot]

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?

[Georgi Krustev]

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

 

 

[Elliot]

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?

[Dimiter Topalov]

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

[Elliot]

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.

 

[Dimiter Topalov]

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