角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