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

實際上，您所發佈的兩個代碼d會拋出一些錯誤。爲什麼？

1 - 您在input中缺少[mdDatepicker]="yourRefToDatePicker";

2 - [mdDatepickerToggle]應指向一個datepicker實例（不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 - 要使用材料2顯示錯誤，建議使用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