Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TypeAhead not working inside ngFor #356

Closed
manuelCorredor opened this issue Apr 1, 2016 · 3 comments
Closed

TypeAhead not working inside ngFor #356

manuelCorredor opened this issue Apr 1, 2016 · 3 comments

Comments

@manuelCorredor
Copy link

When you press enter to select the highlighted suggestion made by the typeAhead , the array that is being iterated by ngfor is reduced to a length of 1. Would be nice if you can help me please.
ng2 version=1.09
Code :

<div  *ngFor="#demandado of notificacionRevMCopy.demandados; #i=index">      
     <div class="input-group"> 
                  <input (blur)="verificarDemandado(i)"
                         [(ngModel)]="demandado.nombre"
                         [typeahead]="demandados"
                         (typeaheadOnSelect)="typeaheadOnSelectDemandado($event,i)"
                         [typeaheadOptionField]="'nombre'"
                         class="form-control">
                         <div [hidden]="!campoFaltanteDemandado[i]" class="alert alert-danger">
                             Este campo es obligatorio.
                         </div>
                      <span class="input-group-btn">
                        <button class="btn btn-default" (click)="removeDemandado(i)" ><img src="images/ico_no_red.png" /></button>
                      </span>
                </div>
                <br>
         </div>
@manuelCorredor
Copy link
Author

@valorkin can you realease the last fix on typeahead pls, I think that is the solution for my problem.

thanks in advance

@anuraagdjain
Copy link

anuraagdjain commented Jan 21, 2018

@manuelCorredor were you able to get it worked with *ngFor. My Input value is cleared when I append a new row. I inspected my html code, value exists but cannot be viewed.

<tr *ngFor="let event of events;let i = index">
                  <td class="text-center">{{i+1}}</td>
                  <td class="text-center">
                    <input type="text" name="name_{{i}}" id="p_name_{{i}}" [(ngModel)]="invoice.product.name">
                    <input [typeaheadWaitMs]="300" [typeaheadMinLength]="3"
                           [typeaheadOptionField]="'name'" [(ngModel)]="event.name"
                           (typeaheadOnSelect)="eventOnSelect($event,event,i)"
                           name="event_name_{{i}}"
                           id="event_name_{{i}}"
                           class="form-control"
                           [typeaheadAsync]="true"
                           [typeahead]="eventDataSource" (keypress)="onSearch(event.name)">
                  </td>

I used (keypress) because I search events based on the text entered.

adding new row => this.events.push(new Event());

A sample of my code.

@Memphis335
Copy link

@anuraagdjain Did you manage to solve this? I have tried all solutions out there to keep the ngModel encapsulated but to no avail. Each row I add is coupled with all other rows by ngModel

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants