angular 5 validation date field using form builder

Question

i have form and i want to validate date field on submit, i am using Form Builder, how can i do this(the angular way) ? another problem why i cant see the value published_date in the date field ? i tried to search and i can't find solution for input date field.

unamePattern = /^\d{1,2}\/\d{1,2}\/\d{4}$/;
  ngOnInit() {
    this.book = 
      {
        id: 55,
        author_name : "vv",
        published_date :  new Date('01/02/2018'),
        title : "cc"
      };
      
      this.form = this.formBuilder.group({
        title : ['', Validators.required],
        author : ['', Validators.required],
        datePublish: ['', Validators.pattern(this.unamePattern)],
        }
      );
  }

<input 
            [(ngModel)]="book.published_date"
            id="dateOfBirth" 
            class="form-control" 
            placeholder="yyyy-mm-dd" 
            name="dp" 
            ngbDatepicker 
            formControlName="datePublish"
            #dp="ngbDatepicker">
            
          <div class="input-group-append">
            <button class="btn btn-outline-secondary" (click)="dp.toggle()" type="button">
                <i class="fa fa-calendar" aria-hidden="true"></i>
            </button>
          </div>

M Khalid Junaid · Answer 1 · 2018-07-07T10:51:28.307

3

If you could use momemt() then it will very easy to get hands on date time things and you could write your own validator as

import {AbstractControl} from '@angular/forms';
import * as moment from 'moment';

export class YourValidator {
  static dateVaidator(AC: AbstractControl) {
    if (AC && AC.value && !moment(AC.value, 'YYYY-MM-DD',true).isValid()) {
      return {'dateVaidator': true};
    }
    return null;
  }
}

And in your form object you could use it like

import {YourValidator} from "....";

this.form = this.formBuilder.group({
    title : ['', Validators.required],
    author : ['', Validators.required],
    datePublish: ['', Validators.compose([Validators.required, YourValidator.dateVaidator])],
});

Demo stackblitz.com/angular-date-validator

edited Jul 07 '18 at 10:51

answered Jul 05 '18 at 07:29

M Khalid Junaid

60,231
8
78
110

when i try to insert text instead the date, it's still validate. i don't know why – Asaf shay Jul 05 '18 at 09:00
@Asafshay I have added demo link to test above validator have a look at [*stackblitz.com/angular-date-validator*](https://stackblitz.com/edit/angular-date-validator?embed=1&file=src/app/shared/date.validator.ts) – M Khalid Junaid Jul 06 '18 at 06:30

score 1 · Answer 2 · answered Jul 05 '18 at 07:55

1

For date validation you can use ng4-validators.

npm i ng4-validators --save

Import and use:

import { CustomValidators } from 'ng4-validators';

ngOnInit() {
  this.book = 
    {
      id: 55,
      author_name : "vv",
      published_date :  new Date('01/02/2018'),
      title : "cc"
    };

    this.form = this.formBuilder.group({
      title : ['', Validators.required],
      author : ['', Validators.required],
      datePublish: ['', CustomValidators.date,
      }
    );
  }

answered Jul 05 '18 at 07:55

Benjamin Taylor

11
1

2

The project is now deprecated, you should now use https://www.npmjs.com/package/ngx-custom-validators . But otherwise, that's the answer I was looking for. – user327961 Jul 02 '19 at 11:55
It doesn't allow custom format. British format for example: DD/MM/YYYY – eddy Jun 21 '20 at 03:41

angular 5 validation date field using form builder

2 Answers2