Kendo UI 上的 Angular DatePicker 验证不起作用

我正在尝试在 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 />
</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。

The exportAs https://angular.io/api/core/Directive#description定义将导出组件/指令的名称。在这种情况下，您想要导出ngModel，它不存在于组件声明中。解决方案很简单 - 只需使用[(ngModel)]代替[(value)]捆绑。因此 Angular 将能够选择 NgModel 实例并将其导出：

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

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

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

[TL;DR]

DatePicker 组件实现了控制值访问器 https://angular.io/api/forms/ControlValueAccessor接口，这使其成为完全兼容 Angular 表单组件。角形另一方面，验证有效 https://github.com/angular/angular/blob/54e02449549448ebab6f255f2da0b4396665c6f0/packages/forms/src/validators.ts反对抽象控制 https://angular.io/api/forms/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 https://plnkr.co/edit/seJ4jLg9WziemQtCVuxk?p=preview

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

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