fecha de inicio menor que la fecha de finalización pero muestra el error Alguien me ayudó a borrar la validación del mensaje de error cuando cambio la fecha de inicio y el valor de la fecha de finalización;``
validador de función fecha de finalización fecha de inicio
import {AbstractControl, ValidatorFn} from '@angular/forms'; export class CustomDateValidators { static fromToDate(fromDateField: string, toDateField: string, errorName: string = 'fromToDate'): ValidatorFn { return (formGroup: AbstractControl): { [key: string]: boolean } | null => { const fromDate = formGroup.get(fromDateField).value; const toDate = formGroup.get(toDateField).value; if ((fromDate !== null && toDate !== null)) { const isRangeValid = (toDate - fromDate > 0); return isRangeValid ? null : {dateRange: true}; } return null }; } }formar grupo en ts
this.form = this.fb.group({ startDate: [null, [Validators.required]], endDate: [null, [Validators.required,]], }, { validator: [ CustomDateValidators.fromToDate('startDate', 'endDate') ]});html
<div class="form-group col-sm-6"> <label for="endDate">{{'interventionSites.labels.endDate' | translate}}</label> <input type="date" class="form-control" id="endDate" placeholder="{{'dd-mm-yyyy' | translate}}" formControlName="endDate" required [ngClass]="{ 'is-invalid': f.endDate.errors && f.endDate.touched || form.hasError('dateRange') }"> <div *ngIf="form.hasError('dateRange')" class="invalid-feedback"> {{'formFeedbacks.errorEndDate' | translate}} </div> </div> </div>EndDate StartDte customValidators
import {AbstractControl, ValidatorFn} from '@angular/forms'; export class CustomDateValidators { static fromToDate(fromDateField: string, toDateField: string, errorName: string = 'fromToDate'): ValidatorFn { return (formGroup: AbstractControl): { [key: string]: boolean } | null => { const fromDate = formGroup.get(fromDateField).value; const toDate = formGroup.get(toDateField).value; if ((fromDate !== null && toDate !== null && toDate<fromDate)) { // const isRangeValid = (toDate - fromDate > 0); // return isRangeValid ? null : {dateRange: true}; return {[errorName]:true} } else{return {[errorName]:false}} return null }; } }formar grupo en ts
this.form = this.fb.group({ startDate: [null, [Validators.required]], endDate: [null, [Validators.required,]], }, { validator: [ CustomDateValidators.fromToDate('startDate', 'endDate','errorName') ]}); get f() { return this.form.controls; }HTML
<div class="form-group col-sm-6"> <label for="endDate">{{'interventionSites.labels.endDate' | translate}}</label> <input type="date" class="form-control" id="endDate" placeholder="{{'dd-mm-yyyy' | translate}}" formControlName="endDate" required [ngClass]="{ 'is-invalid': f.endDate.errors && f.endDate.touched || form.hasError('errorName') }"> <div *ngIf="form.hasError('errorName')" class="invalid-feedback"> {{'formFeedbacks.errorEndDate' | translate}} </div> </div> </div>