start date less thane end date but error displaySome one help me to clear error message validation when i change start date and endDate value ;``
function validator enddate startdate
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
};
}
}
form group in 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
};
}
}
form group in 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>