Angular 6 Nested FormGroup Template Validation
Asked Answered
H

3

6

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)"

Handwriting answered 21/7, 2018 at 19:49 Comment(0)
F
4

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>
Faunie answered 3/5, 2019 at 17:12 Comment(1)
This is an answer for what I have wasted for more than two hours.It just Works!Koah
M
3

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}}

Moonshiner answered 21/7, 2018 at 19:55 Comment(2)
I suppose I could take it a step further and add a private customerName: FormControl and set that after initialization. However that doesn't really help for FormControls dynamically added to a FormArrayHandwriting
In that case you can make customerControls : FormControl[], just go on pushing the references to it, indexed by formControl name.Moonshiner
D
1

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>
Damaraland answered 7/1 at 20:2 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.