7

How to add validation pattern for Date in DD/MM/YYYY format using angular2 Validator.pattern.

I have the "required" validator in place. Cannot find one for date pattern. Code as below:

this.txtDob = new Control("", Validators.compose([Validators.required]));

3 Answers 3

3

There is no built-in date validator. You have to create a custom one http://blog.thoughtram.io/angular/2016/03/14/custom-validators-in-angular-2.html

Your validator will look like this https://github.com/Angular2Buch/angular2-forms/blob/master/src/app/validators/date.validator.ts

Update: You need to have class for the validator. Specify it as a second element of array in Validators.compose:

Validators.compose([Validators.required, MyValidator])

Pattern may work too: How to add form validation pattern in angular2

Sign up to request clarification or add additional context in comments.

1 Comment

Will adding this "/^\d{1,2}\.\d{1,2}\.\d{4}$/" in Validators.pattern work? Like : Validators.pattern('/^\d{1,2}\.\d{1,2}\.\d{4}$/')
3

You can create a simple custom validator as below

import {Injectable} from "@angular/core";
import {FormControl} from "@angular/forms";


@Injectable()
export class DateValidator {

  constructor() {
  }

  static date(c: FormControl) {
    const dateRegEx = new RegExp(/^\d{1,2}\.\d{1,2}\.\d{4}$/);
    return dateRegEx.test(c.value) ? null : {date: true}
  }
}

and call it in your form

senddate: new FormControl(new Date(), Validators.compose([Validators.required, DateValidator.date])),

And then simply show the error in your html

      <mat-error *ngIf="form.controls.senddate.dirty && form.controls.senddate.errors?.date">
        La date d'envoi n'est pas <strong>valide</strong>
      </mat-error>

I hope this could help.

Comments

0

You can also create a service( not mandatory, i.e the following could easily be changed to a regular function ) as follows:

import { Injectable } from '@angular/core';
import { FormControl } from '@angular/forms';

    interface Validator<T extends FormControl> {
      (c: T): { [error: string]: any };
    }

    @Injectable()
    export class DateValidatorClass {

      constructor() { }
      dateValidator(c: FormControl) {

        const dateRegEx = new RegExp(yourRegExInHere);;

        return c.value.test(dateRegEx) ? null : {
          dateValidator: {
            valid: false
          }
    };
  }
}

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.