我正在使用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>