通过DatePicker表单控件进行制表时如何触发“必填字段验证”？

Question

在我的角度应用程序中，我已将必需字段验证添加到DatePicker控件中：

<div class="form-group"
  [ngClass]="{
    'has-required':['injuryDate'].untouched && ['injuryDate'].invalid, 
    'has-error':['injuryDate'].touched && ['injuryDate'].invalid}">

        <label for="injuryDate">
            {{lblInjuryDate}}
            <span class="required-indicator">*</span>
        </label>

        <datepicker formControlName="injuryDate" id="injuryDate" name="dtpInjuryDate">
        </datepicker>

        <span class="error-block"
          *ngIf="['injuryDate'].touched && ['injuryDate'].invalid">  
            {{requiredInjuryDate}}
        </span>
</div>

当我单击DatePicker且不选择日期时，验证将按预期进行：

但是当我仅通过DatePicker控件进行制表时，不会显示以上错误消息。

有人可以告诉我当我通过控件切换时如何触发此验证吗？非常感谢！

Answer 1

我认为由于以下原因，未显示错误消息：['injuryDate'].touched。

默认情况下，touched属性为FALSE，但是当您保留输入内容时，touched值将永久设置为TRUE。