角度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

は、あなたがあなたの `.ts`ファイルを提供することができます

<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