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 :)