title: Angular 6 Nested FormGroup Template Validation
body: <p>My form group structure looks like this (order.component.ts):</p>
  
  <pre><code>this.orderForm = this.formBuilder.group({
    customer: this.formBuilder.group({
      name: ['', Validators.required],
      phone: ['', Validators.required],
      email: ['', Validators.required]
    }),
    ...
  });
  </code></pre>
  
  <p>In the template (order.component.html) I have:</p>
  
  <pre><code>&lt;form [formGroup]="orderForm" (ngSubmit)="onSubmit()"&gt;
    &lt;fieldset formGroupName="customer"&gt;
      &lt;legend&gt;Customer Information&lt;/legend&gt;
      &lt;label for="name"&gt;Full name:&lt;/label&gt;
      &lt;input type="text" formControlName="name" class="form-control" name="name" id="name" required&gt;
      &lt;small class="form-text text-danger" *ngIf="orderForm.controls['customer'].controls['name'].invalid &amp;&amp; (orderForm.controls['customer'].controls['name'].dirty || orderForm.controls['customer'].controls['name'].touched)"&gt;Name invalid&lt;/small&gt;
    &lt;/fieldset&gt;
    ...
  &lt;/form&gt;
  </code></pre>
  
  <p>This works, but is a shorter way of expressing <code>orderForm.controls['customer'].controls['name']</code>? For example it would be more succinct for the *ngIf condition to be <code>"name.invalid &amp;&amp; (name.dirty || name.touched)"</code></p>