0

Estoy intentando usar el autocompletar de material angular, pero al momento de dejarlos dentro de un *ngFor para que sea dinamico (necesito crear una lista de items) el valor de lo ultimo que escribi en cualquiera de ellos se duplica,

Codigo con el problema https://stackblitz.com/edit/angular-q2zfmf?file=app/autocomplete-filter-example.html

Espero alguien me pueda ayudar con la solucion Gracias

1 respuesta 1

1

En tu codigo estas utilizando el mismo FormControl para todos los items que se vayan agregando (siempre se usa el valor de myControl). Por eso se copia en los nuevos. Debes utilizar un nuevo FormControl para cada nuevo item.

Una solucion puede ser:

En el componente:

@Component({
  selector: 'autocomplete-filter-example',
  templateUrl: 'autocomplete-filter-example.html',
  styleUrls: ['autocomplete-filter-example.css']
})
export class AutocompleteFilterExample implements OnInit {

// Convertimos myControls en un array para tener nuevos FormControl`s 
  myControls: FormControl[] = [new FormControl('')];
// varios = ['hola']; Ya no se necesita
  options = [
    'One',
    'Two',
    'Three'
  ];

// Tambien convertimos los filtros en array para tener filtros separados por cada control
  filteredOptions: Observable<string[]>[] = [];

  ngOnInit() {
    this.filteredOptions.push(this.myControls[0].valueChanges
      .pipe(
        startWith(''),
        map(val => this.filter(val))
      )
    );
  }

  filter(val: string): string[] {
    return this.options.filter(option =>
      option.toLowerCase().includes(val.toLowerCase()));
  }


  agregarNuevo() {
    const nuevaPos = this.myControls.push(new FormControl(""));
    this.filteredOptions.push(this.myControls[nuevaPos - 1].valueChanges
      .pipe(
        startWith(''),
        map(val => this.filter(val))
      )
    );
  }
}

En tu plantilla:

  <form class="example-form">

  <!-- myControls es un array de controles, usamos el index para saber cual filtro vamos a usar -->
  <div *ngFor="let control of myControls; let index = index">
     <mat-form-field class="example-full-width">
       <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControls[index]" [matAutocomplete]="auto">
       <mat-autocomplete #auto="matAutocomplete">

         <!-- Usamos el index para seleccionar el filtro respectivo -->
         <mat-option *ngFor="let option of filteredOptions[index] | async" [value]="option">
           {{ option }}
         </mat-option>
       </mat-autocomplete>
     </mat-form-field>
   </div>
</form>


<button mat-raised-button (click)="agregarNuevo()">Agregar Otro Input</button>

Aquí está el código funcional

Una solución más elegante sería crear un componente para contener el formulario y el filtro. En el componente principal se harian copias por cada item. Sería más simple, pero te muestro como hacerlo a la manera que estabas intentando.

1
  • Si esta o cualquier otra respuesta ha resuelto tu problema, por favor considera aceptarla clicando la marca de check (en forma de V debajo de la puntuación de la respuesta). Esto indica a la comunidad que has encontrado una solución y de paso os dará reputación a ambos (a tí y quien ha respondido). Por supuesto, no tienes ninguna obligación de hacerlo.
    – Nery Ortez
    Commented el 3 ago. 2018 a las 17:27

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.