如果我将输入值更改为角度，是否清除startDate enddate错误消息验证

Question

开始日期小于结束日期但错误显示当我更改开始日期和结束日期值时，有人帮助我清除错误消息验证；``

函数验证器结束日期开始日期

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  
};
}
}

在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>

Answer 1

EndDate StartDte customerValidators

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

};
}
}

在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>