0

tengo una aplicacion con filtros en angular que funciona correctamente, pero quisiera optimizarla, ya que tengo ifs y else por todos lados para comprobar los campos que están completos y los que no.

    <mat-form-field appearance="outline">
  <input
    [(ngModel)]="c_reclutamiento"
    matInput
    placeholder="Código reclutamiento"
  />
</mat-form-field>

<mat-form-field appearance="outline">
  <input
    matInput
    (dateChange)="dateChange($event.value._i)"
    [matDatepicker]="picker"
    placeholder="Fecha incoporación"
  />
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

este es mi html normal con un boton de dar a BUSCAR y luego hago las comprobaciones asi...

    if(this.c_reclutamiento === '' && this.status_select === '' && this.fecha_incorporacion=== '' && this.market==='' && this.team===''){
  filteredData = _.filter(this.apiResponse, (item) => {
    return item
  })
}else{
  if (this.c_reclutamiento !== '' && this.status_select !== '' && this.fecha_incorporacion!== '' && this.market!=='' && this.team!=='') {
    filteredData = _.filter(this.apiResponse, (item) => {
      if (item.cod_reclutamiento.toLowerCase() == this.c_reclutamiento.toLowerCase() && item.status.toLowerCase() == this.status_select.toLowerCase() && item.fecha_incorporacion == this.fecha_incorporacion) {
        return item;
      }
    }
    )
  } else {
    if(this.status_select !== '' && this.fecha_incorporacion !== ''){
      filteredData = _.filter(this.apiResponse, (item) => {
        if (item.status.toLowerCase() == this.status_select.toLowerCase() && item.fecha_incorporacion == this.fecha_incorporacion) {
          return item;
        }
      })
    }

con dos filtros o tres bueno, no está optimizado pero puede pasar, el caso es que voy a tener muchos filtros y quiero que esté mucho más optimizado. No sé como poner que solo recoja los campos que tengan valor y luego coger su nombre, valor y ya hacer el filtro como le estoy haciendo. Espero vuestra ayuda, un saludo.

2
  • Para eso no podrias utilizar un validador de formulario?
    – codebear22
    el 29 mar. 2023 a las 19:56
  • Debes buscar información sobre formularios reactivos, tendrías más control sobre tu formulario
    – rbarbeitor
    el 30 mar. 2023 a las 20:53

1 respuesta 1

0

Para conseguir optimizar todo debes transformar tu código a un ReactiveForm y así explotar los poderosos forms de Angular, te dejo un ejemplo para que lo apliques en tu proyecto:

El Template:

   <form class="proyect_two" [formGroup]="createGroupForm">

     <mat-form-field>
      <mat-label>Campo Uno</mat-label>
    <input matInput placeholder="00" formControlName="campoUno">
    </mat-form-field>

    <mat-form-field>
      <mat-label>Campo Dos</mat-label>
      <input matInput placeholder="00" formControlName="campoDos">
   </mat-form-field>

   <mat-form-field>
      <mat-label>Campo Tres</mat-label>
      <input matInput placeholder="00" formControlName="campoTres">
   </mat-form-field>

</form>

El .TS

  public createGroupForm : FormGroup;
  hasChange: boolean = false;   //true cuando hay cambios detectados
  constructor(){}

  ngOninit(){
    this.makeForm()
  }

     makeForm(){
        this.createGroupForm = this._formBuilder.group({
         campoUno: new FormControl(''), //string
         campoDos: new FormControl(0), ///number
         campoTres: new FormControl('') //string
       });

      this.validateForm()
    }     



  validateForm(){

     const initialValue = this.createGroupForm.value

      this.createGroupForm.valueChanges.subscribe(value => {

         // cada vez que la data de cualquier control del form cambie 
         // lo veras aquí

         this.hasChange = Object.keys(initialValue).some(key => 
         this.form.value[key] != 
         initialValue[key])
      });


   }

     /**
     * Valida los controles de un formulario y retorna aquellos que hayan 
     sufrido cambios o 'estén sucios'
     * @param form Formulario a validar
     * @returns 
     */
     getDirtyValues(
      form: FormGroup | FormArray | FormControl | AbstractControl
     ): Map<string, any> | any[] | any | undefined {
        if (!form.dirty) {
          return;
        }

       if (form instanceof FormControl) {
         return form.value;
       }

       if (form instanceof FormGroup) {
          const result = new Map();
          for (const [key, control] of Object.entries(form.controls)) {
          const nestedResult = this.getDirtyValues(control);

           if (nestedResult) {
              result.set(key, this.getDirtyValues(control));
           }
       }

        return result;
     }

     if (form instanceof FormArray) {
           const result = new Array();
        form.controls.forEach(control => {
        const nestedResult = this.getDirtyValues(control);
           if (nestedResult) {
              result.push(nestedResult);
           }
        });

      return result;
    }

    throw new Error('No estas ingresando un FomControl, FormGroup o 
    FormArray');
   }

Aqui encuentras como crear el FormGroup y dos funciones de ayuda para conseguir validar lo que requieres:

validateForm(): crea una suscripción en la que puedes ver los cambios de todos los campos y hacer la lógica que requieras.

getDirtyValues(): Evalua que controles o inputs de tu formulario han recibido edición y te los retorna, ya con esto puedes usar solamente los datos que cambiaron para tu filtro.

Espero sea de utilidad

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.