Angular 2 date validation rule for dd/mm/yyyy format in forms with reactive functionality

this.seedFundForm = this.fb.group({
    multipleSource: this.fb.array([]),
    amount:[data.amount, Validators.compose([Validators.required, Validators.pattern('[0-9]*'), Validators.maxLength(10)])],
    date:[data.date, Validators.compose([Validators.required, Validators.pattern('/^(0[1-9]|[1-2][0-9]|3[0-1])\/(0[1-9]|1[0-2])\/[0-9]{4}$/'), Validators.maxLength(10)])]
});

I've implemented this approach, but unfortunately I haven't been able to solve the problem yet. Could it be that my regular expression is incorrect or could there be another mistake I'm overlooking?

angulartypescript

Answer №1

To resolve the issue, simply remove the first and last slashes from your string.

It appears that the pattern function requires a plain string as input in order to construct a valid regex. Therefore, if you include slashes within the string, they will be treated as part of the search criteria by the regex engine.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieve type definitions for function parameters from an immutable array containing multiple arrays

My current challenge involves implementing a function similar to Jest's test.each iterator: // with "as const" forEach([ [ 1, 2, 3 ], [ "a", "b", "c" ], ] as const, (first, second, third) => { // ...

typescript

What scenarios call for utilizing "dangerouslySetInnerHTML" in my React code?

I am struggling to grasp the concept of when and why to use the term "dangerous," especially since many programmers incorporate it into their codes. I require clarification on the appropriate usage and still have difficulty understanding, as my exposure ha ...

javascriptreactjstypescriptreact-typescriptreact-dom

Angular 5 with Typescript encountered a failure in webpack due to the absence of the property "data" on the Response

I am encountering an issue during webpack compilation. It compiles successfully if I remove .data, but then the page crashes with calls from template->component (which in turn calls a service). Here is the error I am facing: ERROR in src/app/compone ...

javascriptangulartypescriptobservableangular-httpclient

Passing data from child components to parent components in NextJs using Typescript

I have created a new component <ConnectWallet setConnected={(t: boolean) => console.log(t)}> <>test</> </ConnectWallet> The component is initialized as follows import { useState, useEffect } from ' ...

typescriptnext.js

Tips for integrating an arrow function as a property in a functional programming approach using JavaScript or TypeScript

Suppose I were to create a constructor for a functional class with TypeA as an argument, and TypeB representing the type of the class itself. In such cases, I can implement it using: functionName(argument: TypeA): TypeB { this.property = argument; ...

javascripttypescriptfunctional-programming

Using TypeScript with React Bootstrap's <Col> component and setting the align attribute to 'center' can trigger a TS2322 warning

The React app I'm working on includes the code below. The Col component is imported from React-bootstrap <Col md={5} align="center"> This is a column </Col> When using Typescript, I received the following warning: ...

htmlreactjstypescriptnext.jsreact-bootstrap

Unable to render a stationary image located within the component's folder in Angular

Within the components directory, I have placed an image file. It's a simple PNG with a logo on it. The four files in the directory are: blobb.png blobb.comp.ts blobb.comp.html blobb.comp.scss In the HTML file, I included the image using a static so ...

angularasp.net-core-2.2

Verification for collaborative element

I am currently working on creating a shared component for file uploads that can be reused whenever necessary. Interestingly, when I include the file upload code in the same HTML as the form, the validation functions properly. However, if I extract it into ...

angulartypescript

Tips for showing errors in a FormGroup within Angular 8

My website features a textarea that must be filled out with at least 10 characters before the user can submit it. If these requirements are not met, I want to show an error message. Below is the HTML code: <form [formGroup]="formGrp" (submit)="onSubmi ...

angularformsvalidationformgroups

Angular 2/4: Struggling to refresh child component's view

I need assistance with updating the value of "str" in the child component's view from the parent component. I want to do this by calling the "change()" function in the child component. Here is my code: import { Component } from '@angular/core&ap ...

htmlangulartypescript

Preventing duplicate requests when subscribing to an rxjs Observer multiple times

Currently, I am in the process of implementing a custom XHRBackend for my Angular 2 application. Here is the code snippet of the class: import {Request, XHRBackend, BrowserXhr, ResponseOptions, XSRFStrategy} from "@angular/http"; import "rxjs/add/operator ...

ajaxasynchronousangularrxjsobservable

What is the process for accessing getBoundingClientRect within the Vue Composition API?

While I understand that in Vue we can access template refs to use getBoundingClientRect() with the options API like this: const rect = this.$refs.image.$el.getBoundingClientRect(); I am now attempting to achieve the same using template refs within the com ...

typescriptvue.jsvuejs3vue-composition-api

Keep the list up-to-date by adding new items promptly

Utilizing Angular 7, I have implemented the following service (Click here for StackBlitz Example): @Injectable({ providedIn: 'root' }) export class TodoService { todos: BehaviorSubject<Todo[]> = new BehaviorSubject([ { id: 1, tit ...

angulartypescriptangular-httpclient

Angular2 Service Failing to Return Expected Value

It's frustrating that my services are not functioning properly. Despite spending the last two days scouring Stack Overflow for solutions, I haven't been able to find a solution that matches my specific issue. Here is a snippet of my Service.ts c ...

javascriptjsonangulartypescriptangular2-services

How to deactivate the mobile hardware back button functionality in Ionic 2

Our team has been developing a business application and we've encountered a perplexing issue. Every time we press the mobile hardware back button, our application's GUI becomes disrupted. Despite dedicating numerous hours to finding a solution, t ...

javascriptangularionic2

Struggling to comprehend the intricacies of these generic declarations, particularly when it comes to Type Argument Lists

I'm currently reviewing the code snippet from the TypeScript definitions of fastify. I am struggling to understand these definitions. Although I am familiar with angle brackets used for generics, most TypeScript tutorials focus on simple types like Ar ...

typescript

The initial character of the input must always be a letter

I need assistance with an input element that requires 5 characters, with the first character being a letter: <input mdInput #acronyme placeholder="Company" type="text" maxlength="5" minlength="5" required [value]="acronyme.value.toUpperCase()"> Th ...

htmlangulartypescript

Angular Material Datepicker: Changing the input field format when the field value is updated

Currently, I am utilizing a mat-date-rang-input component from Angular Material. To customize the date format to dd/MM/yyyy, I made adjustments within Angular Material which is functioning correctly. <mat-form-field ngClass="filters_dateInterval&qu ...

angulartypescriptangular-materialdate-format

Encountering issue with npm installing incorrect version of angular-cli

I need to install a specific version of Angular, specifically 8.3.19. To do so, I executed the command npm install -g @angular/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5f3c33361f67716c716e66">[email protected]< ...

angularnpmangular-cli

The ng2-chart library displays date in the form of a Unix timestamp

I have a date object imported from my database, but it is showing up as a Unix timestamp (-62101391858000). I know I can format the date using pipes like {{myDate | date:medium}}, however, I am using ng2-charts so I need to find a different solution. My ch ...

typescriptangularng2-charts