0

les comento mi problema.

Lo que ocurre es que tengo que desmarcar todos los checkbox seleccionados al hacer click en "Limpiar filtros" que ejecuta la siguiente funcion =>

  clearProfiles(){
    this.clear = false;
    this.clearFilterEmitter.emit();
    this.profilesActive = false;
    this.placeholder = "";
    this.profiles = [];
   
  }

this.clear = false;

ese seria el booleano que desactivaria los checkbox.

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { TrackHttpError } from '@models/error-model';
import { InstitutionsService } from '@services/institutions.service';
import { FormControl } from '@angular/forms';
import { debounceTime } from 'rxjs/operators';

@Component({
  selector: 'app-institutions-profiles',
  templateUrl: './institutions-profiles.component.html',
  styleUrls: ['./institutions-profiles.component.scss']
})

export class InstitutionsProfilesComponent implements OnInit {
  @Input() profilesActive : any ;
  @Output('profiles') profilesEmitter = new EventEmitter<any>();
  @Output('clearFilter') clearFilterEmitter =  new EventEmitter<any>();
  
  profilesOptions = [];
  profiles = [];
  arraySearch = [];
  checked : any;
  placeholder : any; 
  selectedProfile :any ;
  search = new FormControl('');
  clear : any;


  clearProfiles(){
    this.clear = false;
    this.clearFilterEmitter.emit();
    this.profilesActive = false;
    this.placeholder = "";
    this.profiles = [];
   
  }
}

 <div *ngFor="let p of arraySearch.length>0 ? arraySearch : profilesOptions" class="form-check">
                    <input type="checkbox" name="checkbox" [checked]="clear" class="form-check-input" id="{{p.id}}" (change)="selectProfiles($event, p)">
                    <label class="form-check-label" for="{{p.id}}">{{p.name}}</label>
                </div>

bueno ese es mi codigo en algunas partes, lo resumi porque no va al caso todo el resto. pero ese seria mi TS y HTML con la funcion que eliminaria el checkbox. Pero resulta que este comportamiento lo hace una sola vez es decir, marco todos los casilleros, aprietop "Limpiar filtros" , me desmarca los checkbox, vuelvo a marcar los checkbox, vuelvo a apretar el boton "Limpiar filtros" y no desmarca los checkbox.

1 respuesta 1

1
  clearFilters(){
    const inputs = document.getElementsByName('checkbox');
    inputs.forEach(i =>i['checked']=false)
}

y en el input

<input name="checkbox" /> 

la solucion que a mi me sirvio. Lo que hace es con getElementByName, toma todos los INPUTS(el enlace con el input es el name="checkbox" que le puse) y al momento de hacer click y entrar en la funcion clearFilters(), elimina todos los checkbox que esten tildados, es decir los pone en false. la const inputs tiene todos los elementos que tiene ese input, ya sea checked, autoFocus,children, etc. Por eso lo tenemos que recorrer con un forEach para llegar al elemento checked, que al momento de checkearlo, se pone en true, y si quiero eliminar esos checeked, los pongo en false(funcion clearFilters()). Gracias!

1
  • Gracias por la recomoendacion, ya modifique! saludos. Commented el 18 jul. 2022 a las 14:35

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.