Angular DatePicker 的 Kendo UI 验证不起作用

Posted 2023-05-07

【中文标题】Angular DatePicker 的 Kendo UI 验证不起作用

【英文标题】：Validation on Kendo UI for Angular DatePicker not working

【发布时间】：2018-05-11 16:41:52

【问题描述】：

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

【问题讨论】：

有什么理由不使用[(ngModel)] 代替kendo-datepicker 而不是[(value)]？因为这就是我们使用它的方式，而且效果很好。

【参考方案1】：

exportAs 定义了导出组件/指令的名称。在这种情况下，您想导出组件声明中不存在的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

[TL;DR]

DatePicker 组件实现了ControlValueAccessor 接口，这使它成为一个完全兼容的Angular 表单组件。 Angular Validation on the other hand works 与 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 Form 文档：

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