Does the reactive form trigger a custom validator function upon creation?

Why does the formInit function call isPassValid when constructing the form to check for a valid password?

  ngOnInit() {
    this.formInit();
  }  

  formInit() {
    this.form = this.fb.group({
      password: ['', [Validators.required, this.isPassVaid]]
    });
  }

  isPassValid(control: FormControl) {
    if (control.value) {
      const regex = '^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)(?=.*[^\\da-zA-Z]).{6,10}$';
      const regexp = new RegExp(regex, 'g');
      if (regexp.test(control.value)) {
        return;
      } else {
        return { invalidPass: true };
      }
    }
  }

Answer №1

After initializing the form in ngOnInit following component creation and life cycle hooks, the isPassValid function will be called. If you receive an invalid result, it may be because you have set an empty string as the initial value.

To address this issue, consider using the code snippet below:

formInit() {
    this.form = this.fb.group({
      password: ['', Validators.compose([Validators.required, Validators.pattern('^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)(?=.*[^\\da-zA-Z]).{6,10}$')])]
    });

}

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

What is the best method to transform a JsonArray string into a JsonArray within Angular 4?

"[{\"key\":\"432100000000000300BB\",\"payLoad\":{\"payLoad\":{\"firstName\":\"postop\",\"lastName\":\"postop\",\"gender\":\"null\",\"patId\":&bsol ...

exploring alternatives to ng-container in angular-4.x for selecting elements

Currently in my Angular 4.x project, I have a component using the Selector 'abc' as shown below: @Component({ selector: "Abc", templateUrl: "Abc.html", styleUrls: [ "Abc.css" ] }) However, the "Abc" tag is also present in the DOM, b ...

Trouble arises in AWS Code Pipeline as a roadblock is encountered with the Module

After many successful builds of my Angular project, it suddenly fails to build on AWS Code Build. I reverted back to a commit before any recent changes, but the error persists. When I run ng build --prod locally, it works fine. However, during the pipeline ...

Steps for resolving the Angular datepicker filter issue

Currently, I am facing an issue with filtering dates to display data based on a specified range. The problem arises when the FROM and TO dates are the same, as it fails to show the data for the selected date. For instance, in the following scenario: FROM: ...

Is SignalR affected by the CORS same-origin policy?

After enabling CORS in my .NET core app, regular http requests are functioning properly. However, I am encountering CORS issues with SignalR when running my Angular app. Any suggestions or solutions would be greatly appreciated. Thank you in advance. Cros ...

The attribute 'loaded' is not found in the 'HttpSentEvent' data type

Currently, I have implemented an Angular HTTP post request with the following parameters: this.http .post<{ body: any }>(environment.api.file.upload, reqBody, { reportProgress: true, observe: 'events', }) .subscribe((ev: HttpE ...

Manually close the AntD Menu without using any shortcuts

I'm facing a unique situation with my table implemented using antd. Each row has a dropdown menu that opens a modal upon clicking. To ensure the dropdown menu doesn't trigger the row click event, I used stopPropagation on the menu item click. Eve ...

What is the process for clearing a selection from a table?

I have been facing this issue for some time now. I am working with a basic table where selecting a row highlights it. However, I want to enhance my button functionality by adding a "Remove Selection" feature. When clicked, I need the selected row to lose i ...

What is the process for building .ts components within a Vue application?

Looking to update an old project that currently uses the 'av-ts' plugin and vue-ts-loader to compile .ts files as Vue components. The project is running on Vue 2.4.2, but I want to upgrade it to version 2.6.14. However, since 'vue-ts-loader& ...

I seem to be encountering an issue with my Angular 6 HTTP PUT request

Below is the code snippet: products.service: updateCategorie(ucategorie: Icategorie) { const endpoint = this.url + 'api/Category/Edit'; const headers = new Headers(); headers.append('Authorization', 'Bearer ' + localStorage ...

What is the best way to include a PHP mail file in an Angular project?

I have recently developed a single-page application using Angular that features a contact form. To handle the functionality of this contact form, I opted to use the PHP mail function. The PHP file responsible for handling the form submissions is located wi ...

Setting the isLogged variable for other components in Angular 2 can be accomplished by using a shared

I am using a principalService to retrieve the current authenticated user from the backend server, and authService.ts includes a local variable 'isLogged:boolean'. Goal: I need to access the value of 'isLogged' from authService in Navba ...

Is there a way to identify packages that rely on Angular versions greater than 6.x?

Currently, I am working on a project that is using Angular 5.x, and my task is to upgrade it to version 6.x. It has been almost two weeks since I started this process, struggling to understand how to handle the upgrades using NPM. Unfortunately, I have bee ...

Accessing S3 bucket contents in Angular using Observables

Looking for guidance on structuring a service method in Angular4 to create an s3.listObjects call and return the contents of an S3 bucket as an Observable. Here is my current attempt, unfortunately not yielding successful results: public retrieveFilesFro ...

What distinguishes between a public variable declared as var: any = []; versus a public variable declared as var: any[] =

I'm seeking clarification on the distinction between the following: public var: any = []; // versus public var: any[] = []; ...

Feeling lost with the concept of getcontext in js/ts and uncertain about how to navigate through it

Recently, I've been encountering undefined errors in my browser and can't seem to figure out how to resolve them. It seems that the usage of the keyword "this" in JavaScript and even TypeScript is causing quite a bit of confusion for me. Let&apo ...

Simulate a complete class with its constructor, instance methods, and static functions

I have been searching for a comprehensive example that demonstrates how to properly mock all three elements (ClassA constructor, ClassA.func1 instance function, and ClassA.func2 static function) in my TypeScript project. In the code under test, I need to v ...

Angular 6 is throwing a StaticInjectorError within the AppModule window

Is there a way to access an Excel file from a specific location through the window? constructor( private fb: FormBuilder, private http: Http, private router: Router,private window:Window) { } window.open(this.excelURL + "report/" + this.getexportlist.dat ...

Creating a React prop type validation that is dependent on the value of another prop

I am in the process of creating a custom React Table component, with the following TableProps structure: export interface ColumnType<ItemType, Key extends keyof ItemType = keyof ItemType> { header: string; key?: keyof ItemType; renderCell: (val ...

Troubleshooting Angular MIME problems with Microsoft Edge

I'm encountering a problem with Angular where after running ng serve and deploying on localhost, the page loads without any issues. However, when I use ng build and deploy remotely, I encounter a MIME error. Failed to load module script: Expected a ...