在 Kendo UI 上验证 Angular DatePicker 不工作

Question

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

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

<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 进行相同操作时，出现以下错误：

<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。

Answer 1

exportAs 定义导出 component/directive 的名称。在这种情况下，您想要导出组件声明中不存在的 ngModel。解决方案很简单——只需使用 [(ngModel)] 而不是 [(value)] 绑定。因此 Angular 将能够 select NgModel 实例并导出它：

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

查看 Angular 表单文档了解更多详细信息，以及如何正确 show/hide 验证错误。

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

[TL;DR]

DatePicker 组件实现 ControlValueAccessor interface, which makes it a fully compatible Angular form component. The Angular Validation on the other hand works against AbstractControl 个实例（基本上是 NgModel 或 FormControl 指令）。

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

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

这是一个演示这个的工作演示：

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

如需进一步阅读，请参阅 Angular 表格文档：

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

在 Kendo UI 上验证 Angular DatePicker 不工作

Validation on Kendo UI for Angular DatePicker not working

datepicker

kendo-ui

angular2-forms

kendo-ui-angular2