<div class="demo-autocomplete">
  <h1>Autocomplete</h1>
  <hr />
  <div class="card">
    <div class="header">
      <h3 class="title">Basic Autocomplete</h3>
    </div>
    <form class="content">
      <md2-autocomplete name="city"
                        [items]="items"
                        item-text="name"
                        item-value="value"
                        placeholder="Select City"
                        [(ngModel)]="item"
                        [required]="isRequired"
                        [disabled]="isDisabled"
                        #autocompleteControl="ngModel"></md2-autocomplete>
      <p> Value: {{ item }} </p>
      <p> Touched: {{ autocompleteControl.touched }} </p>
      <p> Dirty: {{ autocompleteControl.dirty }} </p>
      <p> Status: {{ autocompleteControl.control?.status }} </p>
      <button type="button" button="primary" (click)="item='1'">SET VALUE</button>
      <button type="button" button="primary" (click)="isRequired=!isRequired">TOGGLE REQUIRED</button>
      <button type="button" button="primary" (click)="isDisabled=!isDisabled">TOGGLE DISABLED</button>
      <button type="button" button="primary" (click)="autocompleteControl.reset()">RESET</button>
    </form>
  </div>
</div>
