CODEWITHSUNDEEP
angularangular-reactive-forms
az rnd
az rnd

Reputation: 883

How to get nested form group controls

I have created the reactive form like below

this.customerForm = this.fb.group({
      "name": ["", Validators.required],
      "email": "",
      "info": this.fb.group({
        "name": ["", Validators.required],
      })
    })

I have added getter function for getting form controls like below

get f() { return this.customerForm.controls }

I am displaying the error messages like below

<p *ngIf="f.name.errors?.required">Required</p>

But I couldn't display the info error messages. Because it is in nesting group so that I have decided that create another getter for getting info form controls like below

  get fi() { return this.customerForm.controls.info.controls }

But it's not working also I couldn't find why it is not working. Could anyone help to resolve this issue? Thanks in advance.

Upvotes: 2

Views: 1455

Answers (1)

Rakesh
Rakesh

Reputation: 11

on formGroup objects .errors property does not hold anything and would always return null. At group level You will only be able to tell if it is valid or invalid. for actual errors you will need to reach into the nested control.

this.customerForm.get('info').valid  // would work 
this.customerForm.get('info').invalid  // would work
this.customerForm.get('info').errors // will return null even if the control are in error
this.customerForm.get('info.name').errors // would work

Upvotes: 1

Related Questions