-1

I write a function that check the errors, and than i use ngIf to display (or not) a custom text. this way:

// ts
handleError = (controlName: string, errorName: string) => {
    return this.form.controls[controlName].hasError(errorName);
}

// html
<mat-error *ngIf="handleError('tipo', 'required')">Campo obbligatorio</mat-error>

It works nice for "one-level" form group. But what about nested form group? Such as:

this.form = this.fb.group({
    field1: [data.field1, [Validators.required]],
    myObj: this.fb.group({
        field2: [data.myObj.field2, [Validators.required]],
    })
});

Here it seems to crash (saying Cannot read properties of undefined (reading 'hasError') on console).

What's so the best approch to iterate any nested formgroup and check for errors?

markzzz
  • 47,390
  • 120
  • 299
  • 507

1 Answers1

1

Use get method to retrive control, so that you can pass dot delimated value to access nested formcontrol.

component.ts

handleError = (controlName: string, errorName: string) => {
    return this.form.get(controlName).hasError(errorName);
}

component.html

<mat-error *ngIf="handleError('myObj.field2', 'required')">Campo obbligatorio</mat-error>
Chellappan வ
  • 23,645
  • 3
  • 29
  • 60
  • What if I'm within a FormArray? Which is discriminate by a index? Can't do myObj.item[x].field :( – markzzz Mar 18 '22 at 15:10
  • You can access FormArray also ['formGroupKey', ArrayIndex,]==>handleError(['myObj',0], 'required') something like – Chellappan வ Mar 18 '22 at 15:17
  • You use dot delimated string or Array check documentation: https://angular.io/api/forms/AbstractControl#get – Chellappan வ Mar 18 '22 at 15:18
  • Tried your suggesion: `Campo obbligatorio` but it does error – markzzz Mar 19 '22 at 09:05
  • what error are you getting? – Chellappan வ Mar 19 '22 at 13:56
  • it says "ERROR TypeError: Cannot read properties of null (reading 'hasError')" – markzzz Mar 21 '22 at 07:30
  • Which means you might be passing wrong argument, can you create small stackbkitz> – Chellappan வ Mar 21 '22 at 08:35
  • I follow your suggestion. Here's the function: `handleError = (controlName: string, errorName: string) => { return this.form.get(controlName).hasError(errorName); }` – markzzz Mar 21 '22 at 09:14
  • I made a example please check:https://stackblitz.com/edit/angular-ivy-a1bxoa?file=src/app/app.component.ts – Chellappan வ Mar 21 '22 at 09:29
  • I've added another level, as for "ingredienti", from your example: https://stackblitz.com/edit/angular-ivy-ffltbg?file=src/app/app.component.ts . it seems to give the same exact error... – markzzz Mar 21 '22 at 10:55
  • When using array you should pass each level as individual string something like this console.log(this.handleError(['anotherLevel','arr', 0], 'required')); – Chellappan வ Mar 21 '22 at 11:31
  • Yes, but I'm within a component on html page. It is nested on another levels, so I need to pass the whole path; other wise how do I catch the element? refers to my prev code: `Campo obbligatorio` – markzzz Mar 21 '22 at 11:43
  • Can't you pass each formgroup/control key something like ['anotherLevel','farine',itemIndex,'name']? – Chellappan வ Mar 21 '22 at 11:49
  • This way? `Campo obbligatorio`? I got the same error... – markzzz Mar 21 '22 at 12:47
  • Acutally still you are passing string array, it should be array inside string or number handleError(['anotherLevel','farine',itemIndex.name]', 'required')" – Chellappan வ Mar 21 '22 at 12:49
  • Now, this way: handleError(['anotherLevel','farine',itemIndex,'quantita'], 'required')" it says "core.mjs:6485 ERROR Error Code: undefined Message: Converting circular structure to JSON" – markzzz Mar 21 '22 at 13:17
  • Please create stackblitz. – Chellappan வ Mar 21 '22 at 16:40
  • Not very good at stackblitz. Here's my attempt, with my code: https://stackblitz.com/edit/angular-ivy-n1xuir?file=src/app/app.component.html (even if it does errors, not sure why, but not related to my code I believe?) – markzzz Mar 22 '22 at 07:53
  • https://stackblitz.com/edit/angular-ivy-nm48u8?file=src/app/app.component.ts , I made some changes in html, it's working fine – Chellappan வ Mar 22 '22 at 09:17
  • I see. I think this is more related on the way I add new form item. As for this question: https://stackoverflow.com/questions/71537428/whats-the-best-way-to-add-remove-dynamically-form-array-item . Maybe its the wrong way? I've accepted this answer as "Correct". Can you help the other question? – markzzz Mar 22 '22 at 10:37
  • Sure. I will try my best. – Chellappan வ Mar 22 '22 at 10:42