I have an <md-autocomplete>
which has a control that's required. The control is touched and invalid, however it doesn't display any error.
<md-form-field>
<input mdInput id="comboInput" placeholder="{{ label }}" aria-label="State" [mdAutocomplete]="auto" (blur)="blur($event)" (change)="handleChange($event)">
<md-icon mdSuffix class="fa fa-times" (click)="handleInputClear()"></md-icon>
<md-error *ngIf="control.invalid && control.touched">{{"itemIsRequired" | translate: "" : [label] }}</md-error>
<md-autocomplete #auto="mdAutocomplete" [displayWith]="displayFn" (optionSelected)="handleOptionSelect($event)">
<md-option *ngFor="let item of data" [value]="item">
{{ item[textField] }}
</md-option>
</md-autocomplete>
</md-form-field>
I haven't found any documentation on validating this component, so I'm kinda lost.
For error handling I added this code and I can see both control.touched
& control.invalid
are true
<md-error *ngIf="control.invalid && control.touched">{{"itemIsRequired" | translate: "" : [label] }}</md-error>
What am I doing wrong?