how to show validation message when user choose wrong date?

1
votes

Hi I am using mydatepicker in my angular project . https://www.npmjs.com/package/mydatepicker Git url https://github.com/kekeh/mydatepicker#readme

I have one query, In my demo application I have two date field (DOB , date of issue pancard) .I want to show error message when user choose DOB greater than date of issue pancard or vise versa.how I will compare or validate date field in angular on button click

here is my code https://stackblitz.com/edit/angular-ypzjrk?file=src%2Fapp%2Fapp.component.ts

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { IMyDpOptions } from 'mydatepicker';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular';
  showError =false;
  cf: FormGroup;
  datePickerOptions: IMyDpOptions = {
    dateFormat: 'dd/mm/yyyy',
  };
  constructor(private fb: FormBuilder) {
    this.cf = this.fb.group({
      dateOfBirth: ['',[Validators.required]],
      pancard: ['',[Validators.required]]

    })


  }
  onSubmit() {
    this.showError =true;
  }

}
2
javascriptangulartypescript

2 Answers

0
votes

Check Updated answer : https://stackblitz.com/edit/angular-4wksfn?file=src/app/app.component.ts

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { IMyDpOptions } from 'mydatepicker';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular';
  showError =false;
  cf: FormGroup;
  datePickerOptions: IMyDpOptions = {
    dateFormat: 'dd/mm/yyyy',
  };
  constructor(private fb: FormBuilder) {
    this.cf = this.fb.group({
      dateOfBirth: ['',[Validators.required]],
      pancard: ['',[Validators.required]]

    })


  }
  onSubmit() {
   const formVal=this.cf.value;
   let dateOfBirth=formVal.dateOfBirth.epoc;
   let pancard=formVal.pancard.epoc;
   if(dateOfBirth > pancard)
   {
this.showError =true;
   }else{
     this.showError =false;
   }
  }

}





<form novalidate [formGroup]="cf">
<div class="col-4 pull-left pl-10 pr-10 mb-20 form-cont">
      <p class="fs-12 color-grey text-uppercase">Date of Birth<span class="color-red fontWt">&nbsp;*(DD/MM/YYYY)</span></p>
      <my-date-picker [options]="datePickerOptions"
                      formControlName="dateOfBirth"></my-date-picker>
        <span class="error-msg mt--10"
            *ngIf="(cf.get('dateOfBirth').dirty || showError)
            && cf.get('dateOfBirth').errors
            && cf.get('dateOfBirth').errors.required">Please select date of birth.</span>
    </div>

    <div class="col-4 pull-left pl-10 pr-10 mb-20 form-cont">
      <p class="fs-12 color-grey text-uppercase">Date of issue pan card<span class="color-red fontWt">&nbsp;*(DD/MM/YYYY)</span></p>
      <my-date-picker [options]="datePickerOptions"
                      formControlName="pancard"></my-date-picker>
        <span class="error-msg mt--10"
            *ngIf="(cf.get('pancard').dirty || showError)
            && cf.get('pancard').errors
            && cf.get('pancard').errors.required">Please select pancard issue date.</span>
    </div>
        <div *ngIf="showError" class="col-4 pull-left pl-10 pr-10 mb-20 form-cont">
      <p class="fs-12 color-red text-uppercase" style="color:red">Error: DOB greater than date of issue pancard, input correct date</p>
    </div>
    <button (click)=onSubmit()>submit</button>
</form>
0
votes

You should be able to create a custom group validator that take two of your controls' name.

this.cf = this.fb.group({
     dateOfBirth: ['',[Validators.required]],
     pancard: ['',[Validators.required]]
},
{
    validator: [
                dateCheckValidator('dateOfBirth','pancard')
            ]
})

And implement the Validator to be something like:

export function dateCheckValidator(input1: string, input2: string) {
    return function (formGroup: FormGroup) {
        let dobControl = formGroup.get(input1);
        let pancardControl = formGroup.get(input2);

        // ... logic here
        if(error){
            return {'dateError': true};
        }
        return null;
    }
}

update https://stackblitz.com/edit/angular-pqugyk