Angular 5中ngx-datepicker移除无效日期提示并添加has-error类

当然可以搞定这两个需求！我来一步步给你说怎么实现，基于Angular 5的场景：

一、移除输入框内的“invalid date”文本 #

当输入无效日期时，ngx-datepicker默认会把输入框值替换成“invalid date”，我们可以通过监听输入事件拦截这个行为，重置输入框内容：

1. 组件类添加处理逻辑 #

在你的组件.ts文件里添加一个输入监听方法：

onDateInput(event: Event) {
  const inputEl = event.target as HTMLInputElement;
  // 检测到默认无效文本时，清空输入框并同步绑定变量
  if (inputEl.value === 'invalid date') {
    inputEl.value = '';
    this.selectedDate = null; // 这里的selectedDate是你绑定的日期变量
  }
}

2. 模板绑定输入事件 #

在datepicker输入框上绑定这个方法：

<input type="text" 
       class="form-control" 
       [(ngModel)]="selectedDate"
       (input)="onDateInput($event)"
       bsDatepicker> <!-- 若你用的是其他ngx-datepicker库，指令名可能略有不同 -->

二、正确添加has-error类 #

你已经在用[ngClass]，但建议结合Angular表单状态判断，比自定义isDateValid()更可靠（比如避免页面加载就显示错误）：

1. 使用FormControl管理表单状态 #

在组件.ts里声明FormControl并添加自定义日期验证器：

import { Component } from '@angular/core';
import { FormControl, ValidatorFn, AbstractControl } from '@angular/forms';

// 自定义日期验证器，判断输入是否为有效日期
export function validDateValidator(): ValidatorFn {
  return (control: AbstractControl): { [key: string]: any } | null => {
    if (!control.value) return null; // 空值不标记错误，可根据需求调整
    const date = new Date(control.value);
    return isNaN(date.getTime()) ? { invalidDate: true } : null;
  };
}

@Component({
  // 组件元数据（如selector、templateUrl等）
})
export class YourComponent {
  selectedDate: Date | null = null;
  dateControl = new FormControl('', [validDateValidator()]);
}

2. 模板绑定FormControl和ngClass #

修改模板代码，绑定FormControl并基于表单状态添加has-error类：

<div class="col-lg-3 form-group" 
     [ngClass]="{'has-error': dateControl.invalid && dateControl.touched}" >
  <div class="input-group">
    <span class="input-group-addon">
      <!-- 日期图标等元素 -->
    </span>
    <input type="text" 
           class="form-control" 
           [(ngModel)]="selectedDate"
           [formControl]="dateControl"
           (input)="onDateInput($event)"
           bsDatepicker>
  </div>
</div>

如果坚持用自己的isDateValid()方法，要确保逻辑准确判断日期有效性，比如：

isDateValid(): boolean {
  if (!this.selectedDate) return true; // 空值视为有效
  const date = new Date(this.selectedDate);
  return !isNaN(date.getTime());
}

模板里的[ngClass]可写成{'has-error': !isDateValid() && dateControl.touched}，加上touched状态能提升用户体验。

内容的提问来源于stack exchange，提问作者user3272932