Validating <md-autocomplete> in Angular

528 views Asked by At

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?

0

There are 0 answers