Angular 2 - 使用带有 mdDatepicker 输入的 md-hint

Question

我是 Angular 2 的新手，我无法将 md-hint 与 mdDatepicker 一起使用。

我可以使用 md-select 和 'input'。

HTML 无效

<md-input-container>
    <input mdInput placeholder="Start date" name="startDatepicker" required ngModel #startDatepicker="ngModel">
    <button mdSuffix [mdDatepickerToggle]="startDatepicker"></button>
    <md-hint *ngIf="startDatepicker.errors && (startDatepicker.dirty || startDatepicker.touched)" [hidden]="!startDatepicker.errors.required">
        Start date is required.
    </md-hint>                    
</md-input-container>

HTML 确实有效（仅输入字段）

<md-input-container>
    <input mdInput placeholder="Start date" name="startDatepicker" required ngModel #startDatepicker="ngModel">
    <md-hint *ngIf="startDatepicker.errors && (startDatepicker.dirty || startDatepicker.touched)" [hidden]="!startDatepicker.errors.required">
        Start date is required.
    </md-hint>                    
</md-input-container>

我对有效代码所做的一切都在 input 上，删除 [mdDatepicker]="startDatepicker"

Answer 1

事实上，您发布的两个代码都会引发一些错误。为什么？

1 - 您的 input;

中缺少 [mdDatepicker]="yourRefToDatePicker"

2 - [mdDatepickerToggle] 应该指向一个日期选择器实例（而不是你正在做的 ngModel）：

[mdDatepickerToggle]="yourRefToDatePicker"

3 - 你应该有一个 md-datepicker:

的实例

<md-datepicker #yourRefToDatePicker></md-datepicker>

这是一个使用 md-datepicker 的工作示例：

<md-input-container>
  <input mdInput
         placeholder="Start date"
         name="startDatepicker"
         required
         ngModel
         [mdDatepicker]="picker"
         #startDatepicker="ngModel">
  <button type="button" mdSuffix [mdDatepickerToggle]="picker"></button>
  <md-hint *ngIf="startDatepicker.errors && (startDatepicker.dirty || startDatepicker.touched)" [hidden]="!startDatepicker.errors.required">
    Start date is required.
  </md-hint>
</md-input-container>
<md-datepicker #picker></md-datepicker>

也就是说，这里有一些注意事项：

1 - 在同一个元素上使用 *ngIf 和 [hidden] 没有意义（你也应该更喜欢 *ngIf）。

如果你只想检查 required 错误你可以这样做（使用 md-error 作为下面的第二条语句）：

<md-hint *ngIf="startDatepicker.errors?.required && (startDatepicker.dirty || startDatepicker.touched)">
  Start date is required.
</md-hint>

2 - 要显示使用 Material2 的错误，建议使用 md-error 指令，如下所示：

<md-error *ngIf="condition">
  <!-- your error message -->
</md-error>

最终代码可能是这样的：

<md-input-container>
  <input mdInput
       placeholder="Start date"
       name="startDatepicker"
       required
       ngModel
       [mdDatepicker]="picker"
       #startDatepicker="ngModel">
  <button type="button" mdSuffix [mdDatepickerToggle]="picker"></button>
</md-input-container>

<ng-container *ngIf="startDatepicker.invalid && (startDatepicker.dirty || startDatepicker.touched)">
  <md-error *ngIf="startDatepicker.hasError('required')">
    Start date is required.
  </md-error>
  <md-error *ngIf="startDatepicker.getError('mdDatepickerMax') as datepickerMaxError">
    Start date should be less than {{ datepickerMaxError.max }}
  </md-error>
  <!-- another error(s) -->
</ng-container>

<md-datepicker #picker></md-datepicker>

PLUNKER

Angular 2 - 使用带有 mdDatepicker 输入的 md-hint

Angular 2 - Using md-hint With A mdDatepicker Input

angular2-forms

angular