在Kendo UI上对Angular DatePicker进行验证不起作用 [英] Validation on Kendo UI for Angular DatePicker not working

问题描述

我试图在Kendo UI上为Angular DatePicker使用表单验证，但这似乎不起作用.

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>

这很好用.

但是当我使用Angular DatePicker的Kendo UI尝试相同操作时，出现以下错误:

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>

现在我得到了错误:

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

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

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

推荐答案

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

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>

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

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]

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

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).

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

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

有关更多信息，请参阅Angular Form文档:

For further readings, refer to the Angular Form documentation:

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

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