时间戳

首页 > 解决方案 > 如何在 ngx-formly/bootstrap 中显示日期选择器的自定义验证

angular8 - 如何在 ngx-formly/bootstrap 中显示日期选择器的自定义验证

问题描述

我正在使用 ngx-formly/bootstrap（不使用材料）创建动态 UI/表单。我想显示 datepicker 控件，所以我使用 ngx-bootstrap/datepicker 显示了自定义 bsdatepicker 控件。现在我想对这个日期选择器进行验证，例如如果我有从和到日期，那么从日期不应该小于当前日期，或者到日期不应该比从日期更早。任何帮助都会得到帮助。

    //datepicker.html
     <pre><input type="text" 
       id="dob-id" 
       class="form-control calendar" 
       placement="bottom" 
       bsDatepicker
       [formlyAttributes]="field"
       #dobDate="bsDatepicker" 
       [bsConfig]="bsConfig" 
       placeholder="YYYY-MM-DD"
       [class.is-invalid]="showError" class=""  style="width: 350px;">

为此采取了单独的组件并在 app.modeul 中注册

//在示意图中

{
key: 'date1',
type: 'bsdatepicker',
templateOptions: {
label :'From Date',
required: true,
},
},
{
key: 'date2',
type: 'bsdatepicker',
templateOptions: {
label :'To Date',
required: true,
},
},

标签： angular8ngx-bootstrapngx-formly

解决方案

验证由 Formly 处理，因此您只需定义验证及其消息即可，您可以查看文档中的示例：

推荐阅读