The custom validator in Material2 Datepicker successfully returns a date object instead of a string

Question

The custom validator in Material2 Datepicker successfully returns a date object instead of a string

Im currently working on developing a unique custom validator for the datepicker feature within a reactive form group.

Within my code file, specifically the .ts file:


        form: FormGroup;

        constructor(
            private fb: FormBuilder,
            private validatorSrv: CustomValidatorService,
        ) {}

        createForm(): void {
            this.form = this.fb.group({ 
                trans_date: [null, [Validators.required, this.validatorSrv.validDate]] 
            });
        }

Now, focusing on the CustomValidatorService class:


        validDate(c: AbstractControl): any {
           // It always return 'Mon Jan 01 2001 00:00:00 GMT+0800 (Taipei Standard Time)' 
           // When value is 1
           // And 'Sat Dec 01 2001 00:00:00 GMT+0800 (Taipei Standard Time)'
           // When value is 12
           console.log(c.value); 
        }

In the scenario mentioned above, it consistently outputs a JavaScript datetime object.

Is there a way to extract the exact input value from the custom validator's AbstractControl?

javascript angular typescript datepicker angular-material2

Answer 1

Answer №1

It is a frequent occurrence. One solution is to change the date to a string within your validator.

If you are unaware, the Angular Material datepicker has compatibility with moment.js.

For your situation, utilizing this feature may be beneficial. By doing so, you could address your problem simply by converting your date using one of the various functions provided by moment.

Answer 2

It is a frequent occurrence. One solution is to change the date to a string within your validator.

If you are unaware, the Angular Material datepicker has compatibility with moment.js.

For your situation, utilizing this feature may be beneficial. By doing so, you could address your problem simply by converting your date using one of the various functions provided by moment.

Answer 3

Answer №2

It's always a challenge to decide on the best approach for custom date validation, especially when considering the common use of date objects over user input strings. While some may opt for an AbstractControl custom format validation, I find this method to be overly complex for my needs.

Instead, I prefer a more straightforward solution by implementing a simple function triggered on the keypress event of the control for validation purposes.

checkDateValidity(): boolean {
   // Omitted lengthy logic for brevity...
   if (format matches mm/dd/yyyy or mm-dd-yyyy) { return true; }
   return false;
}

handleDateValidation(e: any): void {
    const control = this.form.get('trans_date');

    if (this.checkDateValidity(e.target.value)) {
      control.setErrors(null);
    } else {
      control.setErrors({ invalidDate: true });
    }
}

The ability to programmatically assign errors to a ReactiveForm Control using the setErrors() method is truly remarkable.

Answer 4

It's always a challenge to decide on the best approach for custom date validation, especially when considering the common use of date objects over user input strings. While some may opt for an AbstractControl custom format validation, I find this method to be overly complex for my needs.

Instead, I prefer a more straightforward solution by implementing a simple function triggered on the keypress event of the control for validation purposes.

checkDateValidity(): boolean {
   // Omitted lengthy logic for brevity...
   if (format matches mm/dd/yyyy or mm-dd-yyyy) { return true; }
   return false;
}

handleDateValidation(e: any): void {
    const control = this.form.get('trans_date');

    if (this.checkDateValidity(e.target.value)) {
      control.setErrors(null);
    } else {
      control.setErrors({ invalidDate: true });
    }
}

The ability to programmatically assign errors to a ReactiveForm Control using the setErrors() method is truly remarkable.

The custom validator in Material2 Datepicker successfully returns a date object instead of a string

Answer №1

Answer №2

Similar questions

Discovering the initial word of a string using jQuery

Angular - attaching functions before page navigation - incompatible with HostListener

In Angular 2+, what is the comparable counterpart to Vue's Vuex?

My applications are not firing the deviceready event as expected

Creating multiple rectangles and filling them with a color chosen by the user in Angular can be achieved by following these steps

Dealing with errors using Javascript and Node.js (then/catch)

In the latest version of Expo SDK 37, the update to [email protected] has caused a malfunction in the onShouldStartLoadWithRequest feature when handling unknown deeplinks

Navigating to the HomePage using the nebular auth/login library with the login() function: A step-by-step guide

It is necessary to render React Native text strings within a text component

Attempt the HTTP request again only for specific status codes

Generating an assortment of specific rows by utilizing checkboxes in React JS

"Encountering issues with ngrx store selector when importing app from a custom

Is there a way to utilize a cookie in order for the website to recognize that I have already agreed to the terms?

How can TypeScript limit the number of properties allowed to be passed as a function parameter?

Error: The current call does not match any existing overloads - TypeScript, NextJS, styled-components

Having Trouble Retrieving Environment Variables in Next.js API Endpoints

Is it possible to modify or delete the question mark in a URL?

activating javascript function in rails when the page reloads

I attempted to copy the "koa" module from my node_modules folder to a custom typeRoots directory, but it doesn

Extract the image source from this HTML retrieved using JavaScript