No puedo implementar correctamente el cambio de estilo mat-error cuando la entrada de fecha de finalización de DatePicker es menor que la entrada de fecha de inicio. El botón puede reconocer que la entrada no es válida al deshabilitarse, pero no se producen cambios de estilo de error en 'fecha_finalización'.
Código:
<mat-error *ngIf="userAddressValidations.hasError('validator')"> End date must be greater than start date. </mat-error>Mi objetivo es mostrar este mensaje de error cuando el validador personalizado detecta el error.
Este es mi código de muestra completo:
Un mat-error solo funciona para errores en los controles, no para errores en formGroup.
Pero antes de cambiar su dateCheck para devolver un objeto con propiedad "validador", no "fecha"
function dateCheck(): ValidatorFn { return (control: AbstractControl): { [key: string]: boolean } | null => { if ( control.value.end_date && //<--check only if has value, not !==undefined (isNaN(control.value.end_date) || control.value.end_date < control.value.start_date) ) { return { validator: true }; //<--see that it's "validator" } return null; }; }Luego crea un customErrorMatcher
export class DateEndMatcher implements ErrorStateMatcher { isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean { const isSubmitted = form && form.submitted; //see the comparision return !!(control && (control.invalid || form.invalid) && (control.dirty || control.touched || isSubmitted)); } }Y declara en tu .ts
endDateMatcher = new DateEndMatcher();Y usar en el .html
<input matInput [matDatepicker]="picker2" formControlName='end_date' [errorStateMatcher]="endDateMatcher">Puedes ver en tu stackblitz bifurcado
NOTA: En el nuevo material angular, tiene un selector de fecha de rango
Actualice hay otro enfoque que usa SetErrors
function dateCheck(): ValidatorFn { return (control: AbstractControl): { [key: string]: boolean } | null => { if ( control.value.end_date && (isNaN(control.value.end_date) || control.value.end_date < control.value.start_date) ) { //indicate that setErrors control.get('end_date').setErrors({validator:true}) return { validator: true }; } if (control.value.end_date) control.get('end_date').setErrors(null) //<--put the setErrors to null return null; }; }