我是Angular的新手。我正在使用角度4反应形式,并想出如何执行自定义验证。以下是我对数字的实现
function numberValidator(c: AbstractControl): { [key: string]: boolean } | null {
if (c.pristine) {
return null;
}
if (c.value.match(/.*[^0-9].*/)) {
return { 'numeric': true };
}
return null;
}
phoneControl: ['', [Validators.required, Validators.minLength(10), Validators.maxLength(10), numberValidator]],
我试图找出如何执行货币(有或没有两位小数)和最重要的日期字段。
原谅我,如果这在其他地方得到解答,但我找不到任何角度样本(4)
谢谢你的时间
您需要什么样的日期验证?只是价值是有效的日期?如果在输入元素上设置type="date"
,浏览器将确保仅输入有效日期。
对于您显示的数字验证器和任何货币验证器也是如此。您应该能够在输入元素上设置type="number"
,而您不需要验证器。
如果您仍然想要执行自己的验证,则可以像在示例中一样使用正则表达式。
只需查找货币和日期的正则表达式。对于这个日期,像这样:Javascript - Regex to validate date format
这是使用自定义验证器的另一种选择
import { FormControl } from '@angular/forms';
export class DateValidator {
static ptDate(control: FormControl): { [key: string]: any } {
let ptDatePattern = /^(((0[1-9]|[12]\d|3[01])\/(0[13578]|1[02])\/((19|[2-9]\d)\d{2}))|((0[1-9]|[12]\d|30)\/(0[13456789]|1[012])\/((19|[2-9]\d)\d{2}))|((0[1-9]|1\d|2[0-8])\/02\/((19|[2-9]\d)\d{2}))|(29\/02\/((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))))$/g;
if (!control.value.match(ptDatePattern))
return { "ptDate": true };
return null;
}
static usDate(control: FormControl): { [key: string]: any } {
let usDatePattern = /^02\/(?:[01]\d|2\d)\/(?:19|20)(?:0[048]|[13579][26]|[2468][048])|(?:0[13578]|10|12)\/(?:[0-2]\d|3[01])\/(?:19|20)\d{2}|(?:0[469]|11)\/(?:[0-2]\d|30)\/(?:19|20)\d{2}|02\/(?:[0-1]\d|2[0-8])\/(?:19|20)\d{2}$/;
if (!control.value.match(usDatePattern))
return { "usDate": true };
return null;
}
}
并以这种方式用于“dd / mm / yyyy”格式:
this.formDetail = this.formBuilder.group({
date: ['', DateValidator.ptDate],
});
并以这种方式用于“mm / dd / yyyy”格式:
this.formDetail = this.formBuilder.group({
date: ['', DateValidator.usDate],
});
我希望这有帮助!
创建了一个自定义验证器来处理格式MM / DD / YYYY和MMDDYYYY
function dateValidator(c: AbstractControl): { [key: string]: boolean } | null {
if (c.pristine) {
return null;
}
if ((c.value !== undefined && c.value !== '' && c.value != null)) {
var month = null;
var day = null;
var year = null;
var currentTaxYear = Number(new Date().getFullYear() - 1);
if (c.value.indexOf('/') > -1) {
var res = c.value.split("/");
if (res.length > 1) {
month = res[0];
day = res[1]
year = res[2];
}
}
else {
if (c.value.length == 8) {
month = c.value.substring(0, 2);
day = c.value.substring(2, 4);
year = c.value.substring(4, 8);
}
}
if (isNaN(month) || isNaN(day) || isNaN(year)) {
return { 'dateInvalid': true };
}
month = Number(month);
day = Number(day);
year = Number(year);
if (month < 1 || month > 12) { // check month range
return { 'dateInvalid': true };
}
if (day < 1 || day > 31) {
return { 'dateInvalid': true };
}
if ((month === 4 || month === 6 || month === 9 || month === 11) && day === 31) {
return { 'dateInvalid': true };
}
if (month == 2) { // check for february 29th
var isleap = (year % 4 === 0 && (year % 100 !== 0 || year % 400 === 0));
if (day > 29 || (day === 29 && !isleap)) {
return { 'dateInvalid': true };
}
}
if (year !== currentTaxYear) {
return { 'dateYearGreaterThanTaxYear': true };
}
}
return null;
}
这是我的解决方案:
import {AbstractControl} from "@angular/forms";
export class MyValidators {
// validate MM/DD/YYYY
static date(c: AbstractControl): { [key: string]: boolean } {
let value = c.value;
if (value && typeof value === "string") {
let match = value.match(/^([0-9]{1,2})\/([0-9]{1,2})\/([0-9]{4})$/);
if (!match) {
return {'dateInvalid': true};
}
let date = new Date(`${match[3]}-${match[1]}-${match[2]}`);
if (isNaN(date.getTime())) {
return {'dateInvalid': true};
}
}
return null;
}
}
如果您正在使用Angular Material,则可以使用MatDatepicker与Moment.js集成来使用FormControl验证自定义日期格式,如下所示:
https://material.angular.io/components/datepicker/overview#customizing-the-parse-and-display-formats
HTML:
<input matInput [matDatepicker]="dp" placeholder="Verbose datepicker" [formControl]="date">
TS:
export const MY_FORMATS = {
parse: {
dateInput: 'LL',
},
display: {
dateInput: 'LL',
monthYearLabel: 'MMM YYYY',
dateA11yLabel: 'LL',
monthYearA11yLabel: 'MMMM YYYY',
},
};
@Component({
selector: 'datepicker-formats-example',
templateUrl: 'datepicker-formats-example.html',
styleUrls: ['datepicker-formats-example.css'],
providers: [
{provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]},
{provide: MAT_DATE_FORMATS, useValue: MY_FORMATS},
],
})
export class DatepickerFormatsExample {
date = new FormControl(moment());
}