angular - 按下取消按钮时指令消失
问题描述
我需要验证一个日期,所以我创建了一个指令验证器:
@Directive({
selector: ' input[id=datanint]',
providers: [{
provide: NG_VALIDATORS, useExisting: DateValidatorDirective, multi: true
}]
})
export class DateValidatorDirective implements Validators {
private regExp = /^(0?[1-9]|[12][0-9]|3[01])[\/](0?[1-9]|1[012])[\/]\d{4}$/;
validator: ValidatorFn;
constructor(private el: ElementRef) {
this.validator = validateregex();
}
validate(c: FormControl) {
if (this.el != null && this.el.nativeElement.value != null && this.el.nativeElement.value != '') {
if (!this.el.nativeElement.value.match(this.regExp)) {
return this.validator(c);
}
}
}
}
function validateregex(): ValidatorFn {
return (c: AbstractControl) => {
return { pattern: true }
}
}
这是我的 HTML 标记:
<mat-form-field>
<input id="datanint" formControlName="date" matInput [matDatepicker]="picker" />
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker startView="multi-year"></mat-datepicker>
</mat-form-field>
还有我创建表单构建器的打字稿:
function initializeForm() {
const valObject = {
date: [],
name:[Validators.required]
...
}
Object.keys(fg.controls).forEach(key => {
const control = fg.get(key);
if (valObject[key] && key!="date") control.setValidators(valObject[key]);
else {
if( key!="date"){
control.clearValidators();
}
}
});
}
该程序一直有效,直到我添加新日期并收到正确的错误消息,但是当我单击取消按钮时,我会这样做:
form.reset();
initializeForm()
错误消息消失了,似乎日期的验证器被删除了,但这是不可能的,因为验证器链接到指令。
谁能帮我?
解决方案
推荐阅读
- visual-studio-code - VS Code 中许多与光标词相关的命令有什么区别?
- python - 无法在 TensorFlow 中使用 GPU 进行训练
- azure - Azure AppGW:路由到特定的 URL 路径
- java - Spring Boot Kafka 健康检查不起作用
- python - 删除 Pandas 数据框中不需要的 str
- python - 系列驱动的多个条件
- java - resteasy:@QueryParam 解析嵌套数组结构
- php - 使用 RSA 公钥解密
- r - R - 如何在从网站抓取 pdf 时跳过错误的 url 以避免重新运行抓取任务?
- typescript - @ManyToOne 没有反向 - 属性没有出现在 find 中