Angular reactive form validate nested fields

Question

I'm using Angular 7

I have a nested reactive form

this.salonProfileForm = this.fb.group({
  salonName: new FormControl('', [Validators.required]),
  address: this.fb.group({
    city: new FormControl('', [Validators.required])
  })
});

get f() {
    return this.salonProfileForm.controls;
}

And I have the HTML form like

<input type="text" formControlName="salonName" required />
<ng-container *ngIf="submitted && f.salonName.invalid && (f.salonName.dirty || f.salonName.touched)">
   <small *ngIf="f.salonName.errors.required">
      Salon name is required
   </small>
</ng-container>

<div formGroupName="address">
  <input type="text" formControlName="city" />
  <ng-container *ngIf="submitted && f.city.invalid && (f.city.dirty || f.city.touched)">
    <small *ngIf="f.city.errors.required">
        city is required
    </small>
  </ng-container>
</div>

But this gives error on city input ng-container field as

ERROR TypeError: Cannot read property 'invalid' of undefined

How can I validate the nested input fields?

console.log(this.f.address)

Falyoun · Accepted Answer · 2019-06-23 18:48:49Z

5

You have to access like following:

f.address.controls.city.invalid

Edit

export class Home implements OnInit {
  salonProfileForm : FormGroup;

  ngOnInit() {
    this.salonProfileForm = new FormGroup({
      'salonName': new FormControl('', [Validators.required]),
      'address': new FormGroup({
        'city': new FormControl('', [Validators.required])
    })
  });
 }

}

Moving to .html template

<form [formGroup]="salonProfileForm " (ngSubmit)="onSubmit()">

<div formGroupName="address">
  <input type="text" formControlName="city" />
  <ng-container *ngIf="!salonProfileForm.get('address.city').valid && salonProfileForm.get('address.city').touched">
    <span>This is required</span>
  </ng-container>
</div>

</form>

I have pasted in shape it works , So feel free to update your code to fit the above.

edited Jun 23, 2019 at 18:48

answered Jun 22, 2019 at 16:29

Falyoun

4,0014 gold badges21 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Anuj TBE Over a year ago

Still gives the same error. Also the webstorm editor gives unresolved variable city error.

Falyoun Over a year ago

Kindly console.log(f.address) and show me the output

Anuj TBE Over a year ago

Hey, While running the command ng build --prod, it gives error ` Property 'controls' does not exist on type 'AbstractControl'.` on the line where I have the above error check.

Anuj TBE Over a year ago

stackblitz.com/edit/angular-rq8z9j Check this for the html and ts content

Falyoun Over a year ago

@AnujTBE Try to add a different question for the last error you get maybe it's not related to this answer

|

Collectives™ on Stack Overflow

Angular reactive form validate nested fields

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related