Angular 4 + Angular Material 2 Template Validation du champ de formulaire ne fonctionnant pas

Question

J'ai un champ de recherche qui affiche déroulant avec le contenu dynamique. Je veux être en mesure d'afficher une erreur de validation de modèle. Voici le code:

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

Je reçois cette erreur:

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) 

pointe vers cette qui ligne:

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

Je ne comprends pas pourquoi ils variable est pas définie. J'ai essayé d'utiliser le ngModel name="currentSearchResult" et #currentSearchResult="ngModel" mais cela a donné aussi des erreurs.

Qu'est-ce qui me manque dans ce champ? Merci

Answer 1

Essayez cette syntaxe (j'ai supprimé certaines parties pour la clarté)

<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