Validation pattern for date in DD/MM/YYYY format using angular2

前端 未结 3 434
北荒
北荒 2021-01-14 01:00

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 pa

相关标签:
3条回答
  • 2021-01-14 01:37

    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.

    0 讨论(0)
  • 2021-01-14 01:42

    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

    0 讨论(0)
  • 2021-01-14 01:56

    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
              }
        };
      }
    }
    
    0 讨论(0)
提交回复
热议问题