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.