按下取消按钮时指令消失

问题描述

我需要验证日期，因此我创建了指令验证器：

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

还有我的Typescript，我在其中创建了表单生成器：

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()

错误消息消失了，好像日期上的验证器已删除，但这是不可能的，因为验证器链接到指令。

有人可以帮助我吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）