Mastery over the manipulation of manipulations

Question

Mastery over the manipulation of manipulations

As I work on validating my forms using mat-errors and hasErrors, everything runs smoothly until I encounter the need for another control within an "inner" form group. Here is what I mean:

prozessPersonenzuordnungenForm = new FormGroup({
    person: new FormGroup({
      firmenbezeichnung: new FormControl(),
      nameC: new FormControl('', [Validators.required]),
      briefanrede: new FormControl('x'),
    }),
  });

I am trying to access the validation for person.nameC. I am currently using this function:

public hasError = (controlName: string, errorName: string) => {
    return this.prozessPersonenzuordnungenForm.controls[controlName].hasError(
      errorName
    );
  };

The issue lies in the fact that with this function, I can only reach the person FormGroup and not the nameC formControl. Thus, I require a "deeper control."

This is how my HTML is structured:

<mat-error *ngIf="hasError('nameC', 'required')">Please enter a person!</mat-error>

I have also attempted using person.nameC in the HTML, but it did not work either. What would be a suitable approach to access my inner FormControl with the hasError function?

angular typescript

Answer 1

Answer №1

Given the simplified structure of your controls property being an object:

controls = {
    person: {
       nameC: {
         hasErrors: err => bool
       }
    }
}

You cannot access

controls["person.nameC"]

directly as there is no such property and dot notations are not automatically converted for nested property accessing.

How you handle this scenario is up to you. One approach is to parse the dot-separated strings, split them, and iterate over them to access the nested properties.

For example, if you split the string "person.nameC" into an array using ., you will get

arr = [ "person", "nameC" ]

Now let's look at the algorithm:

let property = controls;

We start with the root property - the entire control object, and iteratively go deeper:

property = property[ arr[0] ]

This translates to

property = property["person"]

, resulting in:

property = {
    nameC: {
       hasErrors: err => bool
    }
}

Repeat the process:

property = property[ arr[1] ]

Which becomes

property = property["nameC"]

, yielding:

property = {
    hasErrors: err => bool
}

This is the desired outcome.

Instead of manual steps like above, you can loop through it:

let property: any = this.prozessPersonenzuordnungenForm.controls;
controlName.split('.').forEach(propertyKey => property = property[propertyKey]);

return property.hasError(errorName);

Answer 2

Given the simplified structure of your controls property being an object:

controls = {
    person: {
       nameC: {
         hasErrors: err => bool
       }
    }
}

You cannot access

controls["person.nameC"]

directly as there is no such property and dot notations are not automatically converted for nested property accessing.

How you handle this scenario is up to you. One approach is to parse the dot-separated strings, split them, and iterate over them to access the nested properties.

For example, if you split the string "person.nameC" into an array using ., you will get

arr = [ "person", "nameC" ]

Now let's look at the algorithm:

let property = controls;

We start with the root property - the entire control object, and iteratively go deeper:

property = property[ arr[0] ]

This translates to

property = property["person"]

, resulting in:

property = {
    nameC: {
       hasErrors: err => bool
    }
}

Repeat the process:

property = property[ arr[1] ]

Which becomes

property = property["nameC"]

, yielding:

property = {
    hasErrors: err => bool
}

This is the desired outcome.

Instead of manual steps like above, you can loop through it:

let property: any = this.prozessPersonenzuordnungenForm.controls;
controlName.split('.').forEach(propertyKey => property = property[propertyKey]);

return property.hasError(errorName);

Answer 3

Answer №2

Thanks a lot for all the help, but I actually discovered a much simpler method!

Here is the solution that worked for me:

public checkForError = (controlName: string, deepControlName:string,  errorName: string) => {
    return this.prozessPersonenzuordnungenForm.controls[controlName].get(deepControlName)?.hasError(errorName);
  };

Now, I can easily implement it like this:

<mat-error *ngIf="checkForError('person', 'nameC', 'required')"> </mat-error>

Answer 4

Thanks a lot for all the help, but I actually discovered a much simpler method!

Here is the solution that worked for me:

public checkForError = (controlName: string, deepControlName:string,  errorName: string) => {
    return this.prozessPersonenzuordnungenForm.controls[controlName].get(deepControlName)?.hasError(errorName);
  };

Now, I can easily implement it like this:

<mat-error *ngIf="checkForError('person', 'nameC', 'required')"> </mat-error>

Mastery over the manipulation of manipulations

Answer №1

Answer №2

Similar questions

What is the process of applying arguments to a class constructor automatically?

Is there a tool in Node.js to set up a new project, similar to the scaffolding feature in Visual Studio for C# projects

Service error: The function of "method" is not valid

Ensure that the database is properly configured before running any test suites

Utilizing Observable Data in Angular 4 TypeScript Components

Duplicate NgRx Effects found during loading process

Exploring the capabilities of UIGrid in conjunction with TypeScript DefinitelyTyped has been a

Setting a value to an optional property of an inherited type is a simple task that can

Utilizing Typescript's type inference within a universal "promisify" function

The first click does not trigger the update for the md-autocomplete

aiplafrom struggles to establish a customer using Vite alongside Vue and TypeScript

What is the proper way to effectively utilize TS typings when using styled-components with withComponent()?

Utilizing dynamic translation ID with Angular's $localize feature

The server.js file is malfunctioning and unable to run

"Production mode is experiencing a shortage of PrimeNG(Angular) modules, while they are readily accessible in development

How can I trigger a function after all nested subscriptions are completed in typescript/rxjs?

What is the reasoning behind TypeScript including both `void` and `undefined` in its type system?

Looking for a regular expression to verify if the URL inputted is valid in TypeScript

Access denied: Authentication with Google Sign-In in Firebase is not permitted for this domain

execute script upon changes to the DOM of the embedded vendor component