我正在尝试为开始时间和结束时间设置自定义验证器,但错误未显示在 html 中。我的动态表单中有开始日期、结束日期、开始时间和结束时间字段。当用户输入相同的开始和结束日期并且开始时间大于结束时间时,应该显示该时间错误。为此,我设置了一个类似这样的自定义验证器。
FormGroup Initiation.Added FormArray 动态推送新行
this.loadFilesForm = this.formBuilder.group({
addRemoveFormArray: this.formBuilder.array([
this.formBuilder.group({
searchType: new FormControl('any'),
customFieldType: new FormControl(''),
dynamicInputField: new FormControl(''),
startDate: new FormControl(null, [Validators.required]),
startTime: new FormControl(null,
[Validators.pattern(/^((0?[1-9]|1[0-2]):[0-5][0-9] ?([APap][Mm]))$/), Validators.required]),
endDate: new FormControl(null, [Validators.required]),
endTime: new FormControl(null, [Validators.pattern(/^((0?[1-9]|1[0-2]):[0-5][0-9] ?([APap][Mm]))$/), Validators.required])
})
])
});
在从下拉列表中选择日期输入时,我正在其中设置自定义验证功能
onChangeSelect(rowIndex, item) {
let loadFieldsTextArray = (<FormArray>this.loadFilesForm.get('addRemoveFormArray'));
if (item === 'DATE') {
loadFieldsTextArray.at(rowIndex).get('startTime').setValidators([this.startTimeValidator(rowIndex)])
}
/** Re-trigger validation for all fields */
const loadFileTextArray = this.loadFilesForm.get('addRemoveFormArray') as FormArray;
for (let control of loadFileTextArray.controls) {
const grp = control as FormGroup;
const val = (grp.controls.dynamicInputField as FormControl);
val.updateValueAndValidity();
}
}
自定义验证器函数
startTimeValidator(index): ValidatorFn {
return (control: AbstractControl): { [key: string]: any } | null => {
console.log('control value', control);
let loadFieldsTextArray = (this.loadFilesForm.get('addRemoveFormArray') as FormArray);
if (startTime && endTime && momentStartDate && momentEndDate) {
if (moment(momentStartDate).isSame(momentEndDate)
&& momentStartTime.isAfter(moemntEndTime)) {
console.log('in if');
return true ? null : { 'startError': { value: true } };
} else {
return false ? null : { 'startError': { value: false } };
}
}
}
}
在 HTML 中我显示这样的错误
<div *ngIf="loadFilesForm.get(['addRemoveFormArray',rowIdx]).get('startTime').hasError('startError')">
Time error
</div>
请让我知道我在做什么错,我也尝试在 html 中设置函数并在其中返回错误 true false 但这也不起作用。