Angular 6 Nested FormGroup Template Validation

Question

My form group structure looks like this (order.component.ts):

this.orderForm = this.formBuilder.group({
  customer: this.formBuilder.group({
    name: ['', Validators.required],
    phone: ['', Validators.required],
    email: ['', Validators.required]
  }),
  ...
});

In the template (order.component.html) I have:

<form [formGroup]="orderForm" (ngSubmit)="onSubmit()">
  <fieldset formGroupName="customer">
    <legend>Customer Information</legend>
    <label for="name">Full name:</label>
    <input type="text" formControlName="name" class="form-control" name="name" id="name" required>
    <small class="form-text text-danger" *ngIf="orderForm.controls['customer'].controls['name'].invalid && (orderForm.controls['customer'].controls['name'].dirty || orderForm.controls['customer'].controls['name'].touched)">Name invalid</small>
  </fieldset>
  ...
</form>

This works, but is a shorter way of expressing orderForm.controls['customer'].controls['name']? For example it would be more succinct for the *ngIf condition to be "name.invalid && (name.dirty || name.touched)"

Answer 1

I ran into same issue. My main problem was that ng build --prod fails when using orderForm.controls['customer'].controls['name'] with error:

Property 'controls' does not exist on type 'AbstractControl'.

Apparently this is just type issue when template gets compiled to TS.

My approach is to create getter for nested form group and cast the correct type which solves both my issue and yours:

get customer() {
  return this.orderForm.controls.customer as FormGroup;
}

used in HTML:

<small class="form-text text-danger" *ngIf="customer.controls['name'].invalid && (customer.controls['name'].dirty || customer.controls['name'].touched)">Name invalid</small>

Answer 2

Yes, that is the correct way to fetch nested form Control and no shortcut.

or you could create some property in your component which points to orderForm.get('customer') form object

private customerForm : FormGroup

And assign it after form initialization

this.customerForm = this.orderForm.get('customer')

and fetch it like {{customerForm.get('name').valid}}

Answer 3

Angular 16: I had the same problem and solved it by setting a flag in my .ts file.

.ts file:

public customerValid: boolean = true;
onSubmit() {
 this.customerValid = (this.form.controls['customer'] as FormGroup).controls['name'].valid;
 ....
}

.html:

<form [formGroup]="orderForm" (ngSubmit)="onSubmit()">
  <div formGroupName="customer">
    <legend>Customer Information</legend>
    <label for="name">Full name:</label>
    <input type="text"  formControlName="name"
    [ngClass]="{ 'is-invalid': submitted && !customerValid}" />
    <div *ngIf="submitted && !customerValid" class="invalid-feedback">
       <div *ngIf="!customerValid"> Name is required</div>
    </div>
  </div>
</form>