Почему не валидируется вложенная форма?

Question

[zlodiak]

Я пытаюсь создать вложенную форму на основе formGroups. Вот моя модель формы:

this.formGroup = this.formBuilder.group({
      'vehType': [null, Validators.required],
      'gosNum': [null, Validators.required],
      'body': this.formGroup = this.formBuilder.group({
        'bodyCapacity': [null, [Validators.required]],
        'bodyVolume': [null, [Validators.required]],
      }),
      'trailer': this.formGroup = this.formBuilder.group({
        'trailerCapacity': [null, [Validators.required]],
        'trailerVolume': [null, [Validators.required]],
      }),
    });

Вот соответствующий шаблон:

<form [formGroup]="formGroup" (ngSubmit)="onSubmit(formGroup.value)" class="form">

    <mat-card>
      <mat-form-field>
        <mat-select  formControlName="vehType">
          <mat-option *ngFor="let option of vehTypes" [value]="option">
            {{ option }}
          </mat-option>
        </mat-select>
      </mat-form-field>
      <mat-form-field>
        <input matInput placeholder="gosNum" formControlName="gosNum">
      </mat-form-field>      
    </mat-card>

    <mat-card [formGroupName]="body">
      <mat-form-field>
        <input matInput placeholder="bodyCapacity" formControlName="bodyCapacity">
      </mat-form-field>  
      <mat-form-field>
        <input matInput placeholder="bodyVolume" formControlName="bodyVolume">
      </mat-form-field>        
    </mat-card>

    <mat-card [formGroupName]="trailer">
      <mat-form-field>
        <input matInput placeholder="trailerCapacity" formControlName="trailerCapacity">
      </mat-form-field>  
      <mat-form-field>
        <input matInput placeholder="trailerVolume" formControlName="trailerVolume">
      </mat-form-field>        
    </mat-card>    

    <div>
      <button mat-raised-button type="submit" [disabled]="!formGroup.valid">Submit Form</button>
    </div>

  </form>

Проблема в том, что даже при всех заполненных полях, вложенные части формы невалидны и форма полностью является невалидной. Это можно увидеть через кнопку отладки, которую я поместил внизу страницы в LIVE DEMO

Помогите пожалуйста исправить валидацию таким образом, что:
1. при заполненных всех полях родительская форма является валидной.
2. при заполненных полях вложенной формы, вложенная форма является валидной, а родительская форма - не обязательно.

Answer 1

[Антон Швец]

<mat-card [formGroupName]="body">
у компонента нет поля body
ошибки типа

Cannot find control with unspecified name attribute

в консоли не смутили чтоли?

Квадратные скобки убери и все заработает. Вот так