Kendo ui 角度日期选择器的剑道UI验证不工作

我试图在剑道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>

我似乎找不到一种简单的方法来验证Angle form元素的剑道UI。

定义了将导出组件/指令的名称。在这种情况下，您希望导出组件声明中不存在的

ngModel

。解决方案很简单-只需使用

[（ngModel）]

而不是

[（value）]

绑定。因此，Angular将能够选择NgModel实例并将其导出：

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

有关如何正确显示/隐藏验证错误的更多详细信息，请查看Angle Form文档

[TL；DR]

DatePicker组件实现该接口，使其成为一个完全兼容的角形组件。针对实例（基本上是NgModel或FormControl指令）的角度

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

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

下面是一个工作演示，演示了这一点：

有关更多读数，请参阅角形文件：

---

您有没有理由不使用

[（ngModel）]

来代替

[（value）]

作为

剑道日期选择器因为这就是我们使用它的方式，它工作得很好。
<kendo-datepicker
  id="geburtsdatum"
  [format]="'dd.MM.yyyy'"
  [(ngModel)]="mitglied.geburtsdatum"
  #geburtsdatum="ngModel"
  required>
</kendo-datepicker>

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