angular ng-autocomplete doesn't work whit [(ngModel)] and name together

Question

i'm using angular 8, installed ng-autocomplete, it works like this:

HTML:

<div class="field">
       <label class="label">Nombre del condominio:</label>
        <div class="control">
          <div class="input is-small is-fullwidth">

            <ng-autocomplete

              [(ngModel)]="condos.conName"
              [data]="condominiums"
              [searchKeyword]="keyword"
              (selected)='selectEvent($event)'
              (inputChanged)='onChangeSearch($event)'
              (inputFocused)='onFocused($event)'
              (inputCleared)='onCleared()'
              [itemTemplate]="itemTemplate"
              [notFoundTemplate]="notFoundTemplate">
            </ng-autocomplete>

            <ng-template #itemTemplate let-item>
              <a [innerHTML]="item.conName"></a>
            </ng-template>

            <ng-template #notFoundTemplate let-notFound>
              <div [innerHTML]="notFound"></div>
            </ng-template>
          </div>
        </div>
      </div>

But send me an error in ng-autocomplete:

ERROR Error: If ngModel is used within a form tag, either the name attribute must be set or the form control must be defined as 'standalone' in ngModelOptions.
  Example 1: <input [(ngModel)]="person.firstName" name="first">
  Example 2: <input [(ngModel)]="person.firstName" [ngModelOptions]="{standalone: true}">

If i use the options like this (i tried with both ones):

<ng-autocomplete
  name="ConName"
  [(ngModel)]="condos.conName"
  [data]="condominiums"
  [searchKeyword]="keyword"
  (selected)='selectEvent($event)'
  (inputChanged)='onChangeSearch($event)'
  (inputFocused)='onFocused($event)'
  (inputCleared)='onCleared()'
  [itemTemplate]="itemTemplate"
  [notFoundTemplate]="notFoundTemplate">
</ng-autocomplete>

there's no error, but autocomplete doens't work anymore, it doesn't dropdown.

ANY IDEA??????

Thank you

nagender pratap chauhan nagender pratap chauhan · Accepted Answer · 2020-05-31T11:54:46

 <ng-autocomplete 
      [data]="locationList" 
      [searchKeyword]="keyword"
      (selected)='selectEvent($event)'
      (inputChanged)='onChangeSearch($event)' 
      (inputFocused)='onFocused($event)' 
      [itemTemplate]="itemTemplate"
      [notFoundTemplate]="notFoundTemplate"
      [(ngModel)]= userLocation.name
      placeHolder="Search Location">
 </ng-autocomplete>
    <ng-template #itemTemplate let-item>
      <a [innerHTML]="item.name"></a>
    </ng-template>
    <ng-template #notFoundTemplate let-notFound>
      <div [innerHTML]="notFound"></div>
    </ng-template>

[(ngModel)]= userLocation.name

-------------- In my .ts file----------------------------------

userLocation : any = {  id: 1, name : 'INDORE'}

LocationList = [{"id":1,"name":"INDORE"},{"id":2,"name":"UJJAIN"},{"id":3,"name":"AHMEDABAD"},{"id":4,"name":"UDAIPUR"}]`

Its show auto fill value also with bind value using ngModel

angular ng-autocomplete doesn't work whit [(ngModel)] and name together

1 Answers