对 Angular DatePicker 的 Kendo UI 的验证不起作用 [英] Validation on Kendo UI for Angular DatePicker not working

问题描述

我正在尝试在 Angular DatePicker 的 Kendo UI 上使用表单验证，但它似乎不起作用.

我正在对所有其他表单元素执行以下操作:

<div class="form-group row" [ngClass]="{ 'has-danger' : email.invalid && (email.dirty || email.touched) }"><input id="email" type="text" class="form-control" [(ngModel)]="member.email" name="email" #email="ngModel" required/>

这工作得很好.

但是当我尝试使用 Angular DatePicker 的 Kendo UI 时，我收到以下错误:

<div class="form-group row" [ngClass]="{ 'has-danger' : geburtsdatum.invalid && (geburtsdatum.dirty || geburtsdatum.touched) }"><kendo-datepickerid="geburtsdatum"[格式]="'dd.MM.yyyy'"[(value)]="mitglied.geburtsdatum"#geburtsdatum="ngModel"需要></kendo-datepicker>

现在出现错误:

没有将exportAs"设置为ngModel"的指令.

我似乎找不到一种方法来以简单的方式验证 Angular 表单元素的 Kendo UI.

解决方案

exportAs 定义了组件/指令将被导出的名称.在这种情况下，您希望导出组件声明中不存在的 ngModel.解决方案很简单 - 只需使用 [(ngModel)] 而不是 [(value)] 绑定.因此 Angular 将能够选择 NgModel 实例并将其导出:

查看 Angular Form 文档以了解更多详细信息，以及如何正确显示/隐藏验证错误.

https://angular.io/guide/forms#show-and-hide-validation-error-messages

[TL;DR]

DatePicker 组件实现了 ControlValueAccessor 接口，使其成为完全兼容的 Angular 表单组件.Angular 另一方面进行验证针对 AbstractControl 实例(基本上是 NgModel 或 FormControl 指令).

考虑到这一点，为了使验证正常工作，您需要使用 [ngModel] 或 [formControl|formControlName] 装饰组件:

这是一个演示此操作的工作演示:

https://plnkr.co/edit/seJ4jLg9WziemQtCVuxk?p=preview

要进一步阅读，请参阅 Angular Form 文档:

https://angular.io/guide/user-input

I'm trying to use form validation on a Kendo UI for Angular DatePicker and it just doesn't seem to work.

I'm doing the following on all other form elements:

<div class="form-group row" [ngClass]="{ 'has-danger' : email.invalid && (email.dirty || email.touched) }">
    <input id="email" type="text" class="form-control" [(ngModel)]="member.email" name="email" #email="ngModel" required />
</div>

This works perfectly fine.

But when I try the same with the Kendo UI for Angular DatePicker I get the following error:

<div class="form-group row" [ngClass]="{ 'has-danger' : geburtsdatum.invalid && (geburtsdatum.dirty || geburtsdatum.touched) }">
    <kendo-datepicker
      id="geburtsdatum"
      [format]="'dd.MM.yyyy'"
      [(value)]="mitglied.geburtsdatum"
      #geburtsdatum="ngModel"
      required>
    </kendo-datepicker>
</div>

Now I get the error:

There is no directive with "exportAs" set to "ngModel".

I can't seem to find a way to validate Kendo UI for Angular form elements in a simple way.

解决方案

The exportAs defines the name under, which the component/directive will be exported. In this case, you would like to export ngModel, which is not present in the component declaration. The solution is simple - just use [(ngModel)] instead of [(value)] binding. Thus Angular will be able to select NgModel instance and export it:

<kendo-datepicker
  id="geburtsdatum"
  [format]="'dd.MM.yyyy'"
  [(ngModel)]="mitglied.geburtsdatum"
  #geburtsdatum="ngModel"
  required>
</kendo-datepicker>

Check the Angular Form documentation for more details, how to show/hide validation errors properly.

https://angular.io/guide/forms#show-and-hide-validation-error-messages

[TL;DR]

The DatePicker component implements the ControlValueAccessor interface, which makes it a fully compatible Angular form component. The Angular Validation on the other hand works against AbstractControl instances (basically NgModel or FormControl directives).

With this in mind, in order to get validation working, you will need to decorate the component either with [ngModel] or [formControl|formControlName]:

<kendo-datepicker
       name="birthDate"
       [(ngModel)]="user.birthDate"
       [min]="min"
       [max]="max"
></kendo-datepicker>

Here is a working demo that demonstrates this:

https://plnkr.co/edit/seJ4jLg9WziemQtCVuxk?p=preview

For further readings, refer to the Angular Form documentation:

https://angular.io/guide/user-input

这篇关于对 Angular DatePicker 的 Kendo UI 的验证不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！