javascriptangulartypescriptmat-form-field

why are these results not the same?


This is the output of my console:

  "_diasInhabilesCampos": [
        {
            "fecha": "2021-10-11T05:00:00.000Z"
        },
        {
            "fecha": "2021-10-11T05:00:00.000Z"
        }
    ],

HTML

<div [formGroupName]="index"
    *ngFor="let item of formularioVertical.get('paso4._diasInhabilesCampos').controls, let index = index">
    <mat-form-field [ngClass]="formFieldHelpers" class="flex-auto mt-4 w-full">
        <input matInput [min]="fechasMin.min" [max]="fechasMin.max" [matDatepicker]="picker1"
            placeholder="Escoje una fecha" [formControlName]="'fecha'" (dateChange)="dateSelect($event,index)">
        <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
        <mat-datepicker #picker1></mat-datepicker>
    </mat-form-field>
    <div class="flex justify-start">
        <button class="px-8" mat-flat-button [color]="'accent'" type="button" (click)="deleteDiasInhabiles(index)">
            Eliminar día
        </button>
    </div>
</div>

Code TS

  dateSelect(e: any, index: number): void {
    const _dias = this.formularioVertical.get('paso4._diasActivo').value;
    if (e.value !== '') {
      const fecha = e.value._d;
      const dia = moment(fecha).day();
      if (_dias.indexOf(dia.toString()) === - 1) {
        this.formularioVertical.get('paso4._diasInhabilesCampos.' + index + '.fecha').setValue('');
        this.formularioVertical.get('paso4._diasInhabilesCampos.' + index + '.fecha').updateValueAndValidity();
        this.formularioVertical.get('paso4._diasInhabilesCampos').updateValueAndValidity();
      } else {
        const _fechas = this.formularioVertical.get('paso4._diasInhabilesCampos').value;
        const clone = [..._fechas];
        if (_fechas.length > 1) {
          clone.pop();
          const _encontrado = clone.find(element => element.fecha === e.value._d);

          console.log(clone[0].fecha === e.value._d);  <---- *OUTPUT: FALSE
          console.log(_encontrado === undefined);      <---- *OUTPUT: TRUE

          if (_encontrado === undefined) {
            this.formularioVertical.get('paso4._diasInhabilesCampos.' + index + '.fecha').setValue(fecha);
            this.formularioVertical.get('paso4._diasInhabilesCampos.' + index + '.fecha').updateValueAndValidity();
            this.formularioVertical.get('paso4._diasInhabilesCampos').updateValueAndValidity();
          } else {
            this.formularioVertical.get('paso4._diasInhabilesCampos.' + index + '.fecha').setValue('');
            this.formularioVertical.get('paso4._diasInhabilesCampos.' + index + '.fecha').updateValueAndValidity();
            this.formularioVertical.get('paso4._diasInhabilesCampos').updateValueAndValidity();
          }
        } else {
          this.formularioVertical.get('paso4._diasInhabilesCampos.' + index + '.fecha').setValue(fecha);
          this.formularioVertical.get('paso4._diasInhabilesCampos.' + index + '.fecha').updateValueAndValidity();
          this.formularioVertical.get('paso4._diasInhabilesCampos').updateValueAndValidity();
        }
      }
    }
  }

I am using the MomentJS package along with the dynamically Angular reactive forms.

I have a button called "Add", this creates an extra field in my reactive form, which is a field that allows me to choose a date, according to my code, first it checks if the date corresponds to an enabled day of the work week, this part works without problems, my problem is when I want to see if the date I am entering does not repeat it, for that I use the find in my array, the curious thing is that I enter the same date and it does not detect it as the same, although my console shows me the opposite, what is the reason, in advance thank you very much for your help.


Solution

  • Don't worry guys, my bad, this donkey forgot to format the dates before comparing them, I've fixed it, thanks anyway.

    I just have to change this phrase at every stop of my function.

    setValue(fecha) ---> setValue(moment(fecha).format())