时间戳

首页 > 解决方案 > 如何在 Angular 中验证清晰设计日期选择器

angular - 如何在 Angular 中验证清晰设计日期选择器

问题描述

我有一个关于清晰设计系统的相当简单的问题。我找不到任何文档来验证用户手动输入clrDate控件的日期。显然，如果从日历中选择日期，日期选择器会自动处理日期，但文档没有提到如果日期无效会发出哪些错误。

编辑：我想检查输入的日期文本是否有效，因为日期控件在内部对此进行检查，但我不知道如何验证它。

    <clr-date-container>
        <label>Basic Demo</label>
        <input type="date" clrDate name="demo" [(ngModel)]="demo">
        <clr-error-control *clrIfError="'whatgoeshere'"></clr-error-control>
    </clr-date-container>

标签： angularvmware-clarity

解决方案

Datepicker 只是一个表单控件。任何常用的 Angular 表单验证策略都可以使用。

模板驱动示例

<form clrForm>
  <clr-date-container>
    <label>Basic Demo</label>
    <input type="date" clrDate name="demo" [(ngModel)]="demo" required>
  </clr-date-container>
</form>

这是一个堆栈闪电战： https ://stackblitz.com/edit/so-62312324-datepicker-validation

更新

这是一个更新的 Stackblitz，它为模板驱动的表单实现了一个自定义验证器：https ://stackblitz.com/edit/so-62312324-datepicker-validation-cbtfpf

请注意，这是一个快速的 poc，它总是无法演示自定义验证如何用于模板驱动的清晰度表单控件。

请注意，其中大部分只是角度形式的东西。Clarity 表单设置为在 Angular 表单之上工作，在这里，您需要做的就是告诉*clrIfError您要检查的自定义验证器。

推荐阅读