如何在Angular2中进行自动完成验证？

Question

I have been trying to implement an auto-complete to an input in my form in angular2. I want to show second hidden div if the input is invalid. Could you help me how to do that please?

<div class="form-group">
<div *ngSwitchCase="'organisation'">
    <label [attr.for]="parameter.ObjectID" [innerHtml]="parameter.paramLabel">  </label>
    <input [id]='parameter.ObjectID' class="form-control" type="text" [(ngModel)]="parameter.value" (keyup)="filter()" (change)="filter()" (blur)="filter()" [required]="parameter.mandatory" name="mandatory" #mandatory="ngModel">
    <div *ngIf="companyNames.length > 0">
        <ul *ngFor="let item of filteredCompanyList">
            <li>
                <a (click)="select(item)">{{item}}</a>
            </li>
        </ul>
    </div>
    <div [hidden]="!parameter.mandatory || mandatory.valid || mandatory.pristine" class="alert alert-danger">Please do not leave this field blank</div>
    <div [hidden]="temp(mandatory)" class="alert alert-danger">The organisation entered was either not found or does not subscribe to the product</div>
</div>

Answer 1

The second hidden div will be displayed if your function temp() returns false.

All your checks (input valid?) you have to do in this function.

UPDATE:

Just use this [hidden]="filteredCompanyList.length > 0" to show/hide your div.