title: Angular 8 / Material : subform not showing errors
body: <p>I created a form with a conditional subform this way:</p>
  
  <p>In the parent form:</p>
  
  <pre><code>&lt;form [formGroup]="layerFormGroup" (submit)="submit()" #f="ngForm"&gt;
    ...
    &lt;div *ngIf="layerFormGroup.value.mode == 'features'"&gt;
      &lt;app-edit-layer-features formControlName="modeFormGroup"&gt;&lt;/app-edit-layer-features&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>with the TS:</p>
  
  <pre><code>ngOnInit() {
  
    this.layerFormGroup = this.formBuilder.group({
      ...
      modeFormGroup: ['', Validators.required]
    });
  }
  
  public submit() {
  
    if (!this.layerFormGroup.valid) {
      return;
    }
  </code></pre>
  
  <p>Then the child form is:</p>
  
  <pre><code>&lt;ng-container [formGroup]="modeFormGroup"&gt;
  &lt;mat-horizontal-stepper&gt;
  
      &lt;mat-step label="Collection" [stepControl]="modeFormGroup"&gt;
          &lt;mat-form-field&gt;
              &lt;mat-label&gt;Collection&lt;/mat-label&gt;
              &lt;mat-select formControlName="collectionCtrl"&gt;
                  &lt;mat-option value="col1"&gt;col1&lt;/mat-option&gt;
                  &lt;mat-option value="col2"&gt;col2&lt;/mat-option&gt;
              &lt;/mat-select&gt;
          &lt;/mat-form-field&gt;
          &lt;div&gt;
              &lt;button mat-button matStepperNext type="button"&gt;Next&lt;/button&gt;
          &lt;/div&gt;
      &lt;/mat-step&gt;
  
      &lt;mat-step label="Rendered geometry" [stepControl]="modeFormGroup"&gt;
          &lt;mat-form-field&gt;
              &lt;mat-label&gt;Rendered geometry&lt;/mat-label&gt;
              &lt;mat-select formControlName="geometryCtrl"&gt;
                  &lt;mat-option value="geoshape"&gt;a geopoint&lt;/mat-option&gt;
                  &lt;mat-option value="geopoint"&gt;a geoshape&lt;/mat-option&gt;
              &lt;/mat-select&gt;
          &lt;/mat-form-field&gt;
          &lt;div&gt;
              &lt;button mat-button matStepperNext type="button"&gt;Next&lt;/button&gt;
          &lt;/div&gt;
      &lt;/mat-step&gt;
  
  &lt;/mat-horizontal-stepper&gt;
  </code></pre>
  
  <p></p>
  
  <p>and finally the child view:</p>
  
  <pre><code>@Component({
  selector: 'app-edit-layer-features',
  templateUrl: './edit-layer-features.component.html',
  styleUrls: ['./edit-layer-features.component.scss'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() =&gt; EditLayerFeaturesComponent),
      multi: true
    },
    {
      provide: NG_VALIDATORS,
      useExisting: forwardRef(() =&gt; EditLayerFeaturesComponent),
      multi: true
    }
  ]
  })
  // ControlValueAccessor: see https://christianlydemann.com/form-validation-with-controlvalueaccessor/
  export class EditLayerFeaturesComponent implements OnInit, ControlValueAccessor, Validator {
  
    public modeFormGroup: FormGroup = this.formBuilder.group({
      collectionCtrl: ['', Validators.required],
      geometryCtrl: ['', Validators.required],
    });
  
    constructor(
      private formBuilder: FormBuilder) { }
  
    ngOnInit() {
    }
  
    public onTouched: () =&gt; void = () =&gt; { };
  
    writeValue(obj: any): void {
      if (obj) {
        this.modeFormGroup.patchValue(obj, { emitEvent: false });
        this.onTouched();
      }
    }
    registerOnChange(fn: any): void {
      this.modeFormGroup.valueChanges.subscribe(fn);
    }
    registerOnTouched(fn: any): void {
      this.onTouched = fn;
    }
    setDisabledState?(isDisabled: boolean): void {
      isDisabled ? this.modeFormGroup.disable() : this.modeFormGroup.enable();
    }
    validate(control: AbstractControl): import('@angular/forms').ValidationErrors {
      return this.modeFormGroup.valid ? null : { invalidForm: { valid: false, message: 'Features fields are invalid' } };
    }
    registerOnValidatorChange?(fn: () =&gt; void): void {
      this.modeFormGroup.valueChanges.subscribe(fn);
    }
  }
  </code></pre>
  
  <p>The issue is the following: when I call the submit() method in the parent form, then the mat-error tags are added in the parent form but not in the child form, i.a. validation errors are shown in the parent form but not in the child one.</p>
  
  <p>After some tests, I found out that calling </p>
  
  <pre><code>this.modeFormGroup.markAllAsTouched()
  </code></pre>
  
  <p>in the child form will indeed show the child errors. Anyway I this should be called from the parent <code>submit()</code> method and I can't find how to do it (<code>this.layerFormGroup.get('modeFormGroup').valid</code> doesn't do the job).</p>
  
  <p>I feel like I am missing something related to material, any clue?</p>
  
  <p>Thx.</p>
  
  <p>Edit 1 : I created a stackblitz where you can see the problem : <a href="https://stackblitz.com/edit/angular-eldyyc" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-eldyyc</a> . If you only choose the mode = <code>Features</code> and you click on <code>save layer</code> then only the <code>name</code> is displayed as an error, not the subform fields</p>