角4 +角材2模板表格字段驗證不起作用

Question

我有一個搜索字段，顯示下拉動態內容。我希望能夠顯示模式驗證錯誤。下面是代碼：

<md-input-container class="search-container"> 
    <input mdInput 
     validateField 
     [(ngModel)]="currentSearchResult" 
     [disabled]="tdDisabled" 
     (keyup)="performSearch(currentSearchResult)" 
     [mdAutocomplete]="searchAuto" placeholder="{{'COMPANY.SEARCH' | translate}}"> 
    <md-error *ngIf="currentSearchResult.touched && currentSearchResult.invalid"> 
    <span *ngIf="currentSearchResult.errors.pattern"> 
     Invalid characters used. 
    </span> 
    </md-error> 
</md-input-container> 

我得到這個錯誤：

TypeError: Cannot read property 'touched' of undefined 
    at Object.eval [as updateDirectives] (SearchComponent.html:8) 
    at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:13058) 
    at checkAndUpdateView (core.es5.js:12238) 
    at callViewAction (core.es5.js:12603) 
    at execComponentViewsAction (core.es5.js:12535) 
    at checkAndUpdateView (core.es5.js:12244) 
    at callViewAction (core.es5.js:12603) 
    at execComponentViewsAction (core.es5.js:12535) 
    at checkAndUpdateView (core.es5.js:12244) 
    at callViewAction (core.es5.js:12603) 

指向這一行：

<md-error *ngIf="currentSearchResult.touched && currentSearchResult.invalid"> 

我不明白爲什麼沒有定義他們的變量。我嘗試使用ngModel name="currentSearchResult"和#currentSearchResult="ngModel"，但也給出了錯誤。

我錯過了這個領域？ 感謝

Answer 1

試試這個語法（我取消了清晰度某些部分）

<md-input-container class="search-container"> 
    <input mdInput 
     [(ngModel)]="currentSearchResult" 
     required 
     name="myModel" 
     #myModel="ngModel"> 


    <md-error *ngIf="myModel.touched && myModel.invalid"> 
    <span *ngIf="myModel.errors.required"> 
     Invalid characters used. 
    </span> 
    </md-error> 
</md-input-container> 

DEMO