1

我需要验证一个日期，所以我创建了一个指令验证器：

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

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

谁能帮我？

4

0 回答 0