Angular get sub form builder controls for validation in html

Question

I'm trying to validate the sub-form builder controls in HTML. But I can not access it.

 this.vendorForm = this.builder.group({
            firstName: ['', Validators.required],
            lastName: ['', Validators.required],
            billingAddress : this.builder.group({
                address: ['', Validators.required],
                country: [null, Validators.required],
                state: [null, Validators.required],
                city: [null, Validators.required],
                email: ['', Validators.required]
            })
 });



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

<div *ngIf="isSaving && f.gstNo.errors" class="invalid-feedback">
      <div *ngIf="f.gstNo.errors.required">GstNo. is required</div>
</div>

Like above HTML code, how can I access the billingAddress controls

Naren Murali · Accepted Answer · 2022-08-26 06:05:22Z

1

You can just write another method for getting the control billing address and then perform a similar validation!

ts

import { Component, OnInit } from '@angular/core';
import {
  AbstractControl,
  FormBuilder,
  FormGroup,
  Validators,
} from '@angular/forms';
import Validation from './utils/validation';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  form: FormGroup;
  submitted = false;

  constructor(private formBuilder: FormBuilder) {
    this.form = this.formBuilder.group({
      fullname: ['', Validators.required],
      billingAddress: this.formBuilder.group({
        address: ['', Validators.required],
      }),
    });
  }

  ngOnInit(): void {}

  get billingAddress() {
    return (<FormGroup>this.form.controls.billingAddress).controls;
  }

  get f(): { [key: string]: AbstractControl } {
    return this.form.controls;
  }

  onSubmit(): void {
    this.submitted = true;

    if (this.form.invalid) {
      return;
    }

    console.log(JSON.stringify(this.form.value, null, 2));
  }

  onReset(): void {
    this.submitted = false;
    this.form.reset();
  }
}

html

<div class="register-form">
  <form [formGroup]="form" (ngSubmit)="onSubmit()">
    <div class="form-group">
      <label>Full Name</label>
      <input
        type="text"
        formControlName="fullname"
        class="form-control"
        [ngClass]="{ 'is-invalid': submitted && f.fullname.errors }"
      />
      <div *ngIf="submitted && f.fullname.errors">
        <div *ngIf="f.fullname.errors.required">Fullname is required</div>
      </div>
    </div>
    <div formGroupName="billingAddress">
      <input
        type="text"
        formControlName="address"
        name="address"
        class="form-control"
        placeholder="billing address"
        [ngClass]="{ 'is-invalid': submitted && f.fullname.errors }"
      />
    </div>
    <div *ngIf="billingAddress.address.errors">
      <div *ngIf="billingAddress.address.errors.required">
        address is required
      </div>
    </div>
    <hr />
    <div class="form-group">
      <button type="submit" class="btn btn-primary">Register</button>
      <button
        type="button"
        (click)="onReset()"
        class="btn btn-warning float-right"
      >
        Reset
      </button>
    </div>
  </form>
</div>

stackblitz

edited Aug 26, 2022 at 6:05

answered Aug 26, 2022 at 5:44

Naren Murali

66.2k6 gold badges51 silver badges96 bronze badges

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

2 Comments

boycod3 Over a year ago

this code is wrong.

Eliseo Over a year ago

you can use also:<div *ngIf="form.get('billingAddress.address').errors.?required"> or <div *ngIf="form.hasError('required','billingAddress.address')"> (see hasError doc)

Collectives™ on Stack Overflow

Angular get sub form builder controls for validation in html

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related