gpt4 book ai didi

angular - 响应式(Reactive)表单自定义验证器不显示 Angular6 中的错误

转载 作者:行者123 更新时间:2023-12-02 03:32:23 24 4
gpt4 key购买 nike

在这个演示中,我为自定义验证器创建了一个示例表单,这里我有起始日期和截止日期以及起始时间和截止时间,工作正常:对于起始日期和截止日期验证工作正常并显示错误消息。

问题:当选择相同的日期时,例如)2018 年 7 月 21 日作为起始日期,并且“截止日期”和“起始日期”相同,起始时间为凌晨 4:00,截止时间为凌晨 3:00,条件得到满足,但没有显示错误消息。在实现过程中出现了一些问题,任何人都可以帮助我解决,不胜感激

在 html 中,我给出了验证消息,但未显示。

To Time:
<input type="time" formControlName="ToTime">
<mat-error *ngIf="DaterForm.get('ToTime').hasError('InValidToTime')">FromTime Should be less than ToTime if choose a same date</mat-error>

在组件中:

 DaterForm : FormGroup;

constructor(private fb:FormBuilder){
}
ngOnInit(){

this.DaterForm = this.fb.group(
{
FromDate:['',[AppCustomDirective.fromDateValidator]], // validation working fine
FromTime:[''],
ToDate:['',[AppCustomDirective.ToDateValidator]],// validation working fine
ToTime:['']
},{validator:[AppCustomDirective.timeValidator] // validation not working
}

自定义验证:

import { AbstractControl, FormControl, FormGroup, ValidatorFn, Validators } from '@angular/forms';

export class AppCustomDirective extends Validators{

static fromDateValidator(fdValue: FormControl) {
const date = fdValue.value;
console.log('x');
if (date ===null || date==='') return { requiredFromDate: true };

}

static ToDateValidator(todValue: FormControl) {
const date = todValue.value;

if (date ===null || date==='') return { requiredToDate: true };

}


static timeValidator(formGroupValues: FormGroup): any {
debugger;
console.log(formGroupValues);
const FromDate = formGroupValues.get('FromDate').value;
const ToDate = formGroupValues.get('ToDate').value;
const FromTime = formGroupValues.get('FromTime').value;
const ToTime = formGroupValues.get('ToTime').value;

if (FromDate.toString() === ToDate.toString()) {
let fromTime = [];
let toTime = [];
fromTime = FromTime.split(':');
toTime = ToTime.split(':');
if (parseInt(fromTime[0]) > parseInt(toTime[0])){
alert("condition satisfied not return any error message");
return { InValidToTime: true };
}
else if (
parseInt(fromTime[0]) === parseInt(toTime[0]) &&
parseInt(fromTime[1]) > parseInt(toTime[1])
){ alert("condition satisfied not return any error message")
return { InValidToTime: true };
}
}
}
}

live demo

最佳答案

这是因为您在表单上设置了错误,而您预计特定输入会出现错误。

更改为<mat-error *ngIf="DaterForm.hasError('InValidToTime')">修复了问题。

仅供引用,这不是怎么回事mat-error设计用于与 <input matInput/> 一起使用

https://stackblitz.com/edit/angular-customvalidator-1fu5vx?file=app/datepicker-overview-example.html

关于angular - 响应式(Reactive)表单自定义验证器不显示 Angular6 中的错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51449112/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com