自定义Angular验证程序与插件jquery maskedinput冲突

我正在使用smartadmin模板5,正好是我遇到问题的输入日期,我对这个模板的了解是使用名为makedinput的插件,在我的情况下,我需要一个验证器来检查日期,所以我为此目的创建了一个指令,但是发生冲突,掩码工作正常,但验证程序却没有,你们中的任何一个对此都有一个想法,谢谢
我在此链接中上传了一个演示: https://stackblitz.com/edit/angular-jehxso

我已经制定了这样的指令来进行验证:

import {
  ReactiveFormsModule,NG_VALIDATORS,FormsModule,FormGroup,FormControl,ValidatorFn,Validator
} from '@angular/forms';
import { Directive } from '@angular/core';

@Directive({
  selector: '[datevalidator][ngModel]',providers: [
    {
      provide: NG_VALIDATORS,useExisting: DateValidator,multi: true
    }
  ]
})

export class DateValidator implements Validator {
  validator: ValidatorFn;
  constructor() {
    this.validator = this.dateValidator();
  }
  validate(c: FormControl) {
    return this.validator(c);
  }

  dateValidator(): ValidatorFn {
    return (c: FormControl) => {
      let isValid = true;
      if (c.value) {
        let  data  = c.value.split("/");
        let d = new Date(data[2] + '/' + data[0] + '/' + data[1]);
        isValid = d && (d.getMonth() + 1) == data[0] && d.getDate() == Number(data[1]) && d.getFullYear() == Number(data[2]);
      }

      console.log('myDate',isValid);

      if (isValid) {
        return null;
      } else {

        return {
          datevalidator: {
            valid: false
          }
        };
      }

    }
  }
}

指令掩码如下:

import {Directive,Input,ElementRef,OnInit} from '@angular/core';

declare var $: any;

@Directive({
    selector: '[saMaskedInput]'
})
export class MaskedInput implements OnInit{

    @Input() saMaskedInput: string;
    @Input() saMaskedPlaceholder: string;

    constructor(private el: ElementRef) {}

    ngOnInit(){
        System.import('script-loader!jquery.maskedinput/src/jquery.maskedinput.js').then(()=>{
            let options = this.saMaskedPlaceholder ? {placeholder: this.saMaskedPlaceholder} : '';
            $(this.el.nativeElement).mask(this.saMaskedInput,options)
        })
    }

}

使用mask伪指令输入(掩码有效,但验证无效)。
如果我们删除该指令,它将正常工作

<input type="text" class="form-control" datevalidator id="date"
       name="date" [(ngModel)]="mydate"   #dateIn="ngModel"  saMaskedInput="99/99/9999" saMaskedPlaceholder= "-"
>
<p *ngIf="dateIn.errors?.datevalidator">Please provide a valid Date</p>
simmering 回答:自定义Angular验证程序与插件jquery maskedinput冲突

暂时没有好的解决方案,如果你有好的解决方案,请发邮件至:iooj@foxmail.com
本文链接:https://www.f2er.com/2969640.html

大家都在问