validation - validate - formgroup

endDate> startDate en material angular

Question

Estoy construyendo un componente ( html , css , spec.ts , ts ) en angular en el que siempre quiero endDate > startDate . He seguido este enlace https://material.angular.io/components/datepicker/overview para hacer múltiples fechadores.

Este es el html que he usado para startDate y endDate.

fecha de inicio:

<div class="item item-1" fxFlex="50%" fxFlexOrder="1">
   <mat-form-field>
      <input matInput [matDatepicker]="picker1" placeholder="{{''PORTAL.STARTDATE'' | translate}}" type="text" formControlName="startDate" [(ngModel)]="unavailability.startDate" [readonly]="!componentPermission.writePermission">
      <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
      <mat-datepicker #picker1></mat-datepicker>
   </mat-form-field>
</div>

fecha final:

<div class="item item-2" fxFlex="50%" fxFlexOrder="2">
   <mat-form-field>
      <input matInput [matDatepicker]="picker2" placeholder="{{''PORTAL.ENDDATE'' | translate}}" type="text" formControlName="endDate" [(ngModel)]="unavailability.endDate" [readonly]="!componentPermission.writePermission">
      <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
      <mat-datepicker #picker2></mat-datepicker>
   </mat-form-field>
</div>

El código validateForm() que he usado en ts es:

  validateForm() {
    this.unavailabilityForm = this.formBuilder.group({
      ''startDate'': [''''],
      ''endDate'': ['''']

    });
  } 

Estoy bastante seguro de que tengo que hacer algunos cambios en el código validateForm() pero no estoy seguro de qué cambios debo hacer.

Answer 1

Como parece que va con una combinación de forma reactiva y plantilla, elegiría una forma reactiva por completo. Implementar la validación también es, en mi opinión, más fácil y más limpio. Esto también significa que puede descartar ngModel completo, lo que yo sugeriría con fuerza, ya que puede causar problemas inesperados con dos enlaces (control de formulario y ngModel).

Así que construya su formulario y adjunte un validador personalizado. En caso de que tenga un formulario grande, adjuntaría el validador personalizado a un grupo anidado de sus fechas, como se muestra en este ejemplo, el validador se activa siempre que haya algún cambio en el formulario, no importa si es la fecha campos, o algún otro campo.

constructor(private formBuilder: FormBuilder) { 
  this.unavailabilityForm = this.formBuilder.group({
    ''startDate'': [''''],
    ''endDate'': ['''']
  }, {validator: this.checkDates});  
}

Si obtiene sus valores para la unavailability variable en una etapa posterior, puede usar patchValue o setValue para asignar los valores a sus controles de formulario:

this.unavailabilityForm.setValue({
  startDate: this.unavailability.startDate;
  endDate: this.unavailability.endDate;
})

El validador personalizado simplemente verifica que la fecha de finalización sea posterior a la fecha de inicio y devuelve null si es válido, o luego un error de validación personalizado:

checkDates(group: FormGroup) {
  if(group.controls.endDate.value < group.controls.startDate.value) {
    return { notValid:true }
  }
  return null;
}

y luego puede mostrar este error personalizado en la plantilla con:

<small *ngIf="unavailabilityForm.hasError(''notValid'')">Not valid</small>

Recuerde también marcar este grupo de formularios en su etiqueta de formulario:

<form [formGroup]="unavailabilityForm">

Aquí hay una DEMO para ti :)