Angular get sub form builder controls for validation in html-CodePudding

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" >
      <div *ngIf="f.gstNo.errors.required">GstNo. is required</div>
</div>

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

CodePudding user response：

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

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 >
  <form [formGroup]="form" (ngSubmit)="onSubmit()">
    <div >
      <label>Full Name</label>
      <input
        type="text"
        formControlName="fullname"
        
        [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"
        
        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 >
      <button type="submit" >Register</button>
      <button
        type="button"
        (click)="onReset()"
        
      >
        Reset
      </button>
    </div>
  </form>
</div>

stackblitz