1

Buen dia, tengo un problema con un elemento mat-autocomplete que lo creo dinamicamente con angular material, y este es el codigo de la vista:

<button type="button" class="btn btn-dark" (click)="crearDotacion()">Crear Dotación</button>

<div *ngFor="let dot of crearMateriales; let i = index">

   <mat-form-field fxFlex="25">
        <input matInput placeholder="Material" aria-label="Material" [matAutocomplete]="auto" [formControl]="miControl" [(ngModel)]="dot.selectMaterial" >
        <mat-autocomplete #auto="matAutocomplete">
          <mat-option *ngFor="let material of materiales | async" (click)='changeMaterial2(material,i)' [value]="material.v_nombre_material">           
            <span>{{ material.v_nombre_material }}</span>                     
          </mat-option>
        </mat-autocomplete>
      </mat-form-field> 

 <div>

El codigo del .ts:

newServicio(){

    const property = {
        'selectMaterial': null,
        'tallas': null,
        'selectTalla': null,
        'cantidad': null,
        'stock': null,
        'stock_statico': null,
        'selectTipo': null,
        'selectObs': null,
        'longitudTallas': 0,
        '_status': true
    }; 
    if ( this.crearMateriales.length < 10){
        this.crearMateriales.push(property);
    }
}
crearDotacion(){


    this.newServicio();
}

Me lanza el siguiente error al crear un nuevo nodo:

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'model: BOTINES CALERO 37 '. Current value: 'model: null'.

Al mismo tiempo se borra lo del input buscado.

1 respuesta 1

0

Bueno primeramente el primer error que noto en tu codigo a simple vista es que no cierras la etiqueta div. Ahora bien si estas utilizando ngModel no es recomendable utilizar formControl y esto lo veraz en la consola ya que te lo advierte en un warning.

Si revisas https://angular.io/api/forms/FormControlDirective#use-with-ngmodel que es donde se explica ésto en la documentación te darás cuenta que ya está obsoleto:

Usar con ngModel

El soporte para usar la ngModelpropiedad de entrada y el ngModelChangeevento con directivas de forma reactiva ha quedado obsoleto en Angular v6 y se eliminará en Angular v7.

A continuación te pongo un ejemplo de como quedaria tu código quitando el formControl mencionado anteriormente (En éste caso dejo también el codigo del ts que utilice para realizar mis pruebas, aunque para resolver el problema que mencionas solo bastaria con quitar el formControl):

HTML

<button type="button" class="btn btn-dark" (click)="crearDotacion()">Crear Dotación</button>

<div *ngFor="let dot of crearMateriales; let i = index">

   <mat-form-field fxFlex="25">
        <input matInput placeholder="Material" aria-label="Material" [matAutocomplete]="auto" [(ngModel)]="dot.selectMaterial" >
        <mat-autocomplete #auto="matAutocomplete">
          <mat-option *ngFor="let material of materiales | async" (click)='changeMaterial2(material,i)' [value]="material.v_nombre_material">           
            <span>{{ material.v_nombre_material }}</span>                     
          </mat-option>
        </mat-autocomplete>
      </mat-form-field> 

 </div>

TypeScript (.ts)

Variables:

crearMateriales = [];
miControl = new FormControl();
arrMateriales = [{v_nombre_material: 'material 1'}, {v_nombre_material: 'material 2'}, {v_nombre_material: 'material 3'}]
materiales: Observable<Array<any>>;

Métodos:

  ngOnInit() {
    this.materiales = this.miControl.valueChanges
    .pipe(
      startWith(''),
      map(name => name ? this._filter(name) : this.arrMateriales.slice())
    );
  }

  newServicio(){
    const property = {
      'selectMaterial': null,
      'tallas': null,
      'selectTalla': null,
      'cantidad': null,
      'stock': null,
      'stock_statico': null,
      'selectTipo': null,
      'selectObs': null,
      'longitudTallas': 0,
      '_status': true
    }; 
    if ( this.crearMateriales.length < 10){
      this.crearMateriales.push(property);
    }
  }
  crearDotacion(){
    this.newServicio();
  }
  changeMaterial2(material, i) {
    console.log('Haqui tu código cuando haces click');
  }
  private _filter(name: string) {
    const filterValue = name.toLowerCase();
    return this.arrMateriales.filter(option => option.v_nombre_material.toLowerCase().indexOf(filterValue) === 0);
  }

Prueba con esto y dime como te fue. Saludos ;)

9
  • Estimado Israel, gracias, si bien ya no sale el error anterior la busqueda del siguiente elemento creado se trunca, es decir se congela, gracias por tu colaboracion.
    – joselo
    el 6 ene. 2020 a las 18:18
  • Tal vez si modificaras tu pregunta y añadieras la parte de como realizas tu Observable y tu cargado podria ayudarte más ya que esa parte yo la complete posiblemente allí exista algun error
    – Israel-ICM
    el 6 ene. 2020 a las 18:23
  • this.materiales = this.miControl.valueChanges .pipe( startWith(''), map(material=>material ? this._filtrarMateriales(material):this.materiales2) ); y la funcion del filtrado es esta:
    – joselo
    el 6 ene. 2020 a las 18:24
  • private _filtrarMateriales(value: string): Material[] { const filterValue = value.toLowerCase(); return this.materiales2.filter(material => material.v_nombre_material.toLowerCase().indexOf(filterValue) === 0); }
    – joselo
    el 6 ene. 2020 a las 18:24
  • Seria mucho mejor que lo subieras a un repositorio como github o stackblitz para una revision con más detalle, si es que pudieras ;)
    – Israel-ICM
    el 6 ene. 2020 a las 18:24

Tu Respuesta

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

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