title: Reactive Form Validation not working with ControlValueAccessor
body: <p>I've created a simple nested form that depends on the child component rather than putting everything into one component.
  I've implemented a very basic ControlValueAccessor to enable it to work in such fashion, however what I noticed is that validation doesn't get captured at parent component. This means a faulty form can be submitted even though its not valid.</p>
  <p>How do i get the validation of child forms to propagate up to the parent form.</p>
  <p>Below is the code.</p>
  <p>Parent HTML</p>
  <pre><code>&lt;form [formGroup]=&quot;parentForm&quot; (ngSubmit)=&quot;submitData()&quot;&gt;
      &lt;h3&gt;Parent&lt;/h3&gt;
      &lt;br&gt;
      &lt;ng-container formArrayName=&quot;children&quot;&gt;
          &lt;ng-container *ngFor=&quot;let c of children?.controls; index as j&quot;&gt;
              &lt;app-child [formControlName]=&quot;j&quot;&gt;&lt;/app-child&gt;
          &lt;/ng-container&gt;
      &lt;/ng-container&gt;
  
      &lt;button mat-raised-button type=&quot;button&quot; (click)=&quot;addChild()&quot;&gt;Add Activity&lt;/button&gt;
      &lt;button mat-raised-button type=&quot;submit&quot; color=&quot;warn&quot; [disabled]=&quot;!parentForm.valid&quot;&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  
  &lt;pre&gt;
  {{parentForm.valid}} // this is always true because its not getting validator state from children
  &lt;/pre&gt;
  &lt;pre&gt;
  {{parentForm.value | json}}
  &lt;/pre&gt;
  </code></pre>
  <p>Parent TS</p>
  <pre><code>export class ParentComponent implements OnInit {
    parentForm: FormGroup;
  
    constructor(private fb: FormBuilder) {
      
    }
  
    ngOnInit(): void {
      this.createForm();
    }
  
    private createForm() {
      this.parentForm = this.fb.group({
        children: this.fb.array([])
      });
    }
  
    get children(): FormArray {
      return this.parentForm.get(&quot;children&quot;) as FormArray;
    }
  
    addChild() {
      const tempChild = new FormControl({
        description: null
      });
  
      this.children.push(tempChild);
    }
  
    submitData() {
      console.info(JSON.stringify(this.parentForm.value));
    }
  }
  </code></pre>
  <p>Child HTML</p>
  <pre><code>&lt;form [formGroup]=&quot;newChildForm&quot;&gt;
      &lt;tr&gt;
          &lt;td&gt;
              &lt;mat-form-field&gt;
                  &lt;mat-label&gt;Description&lt;/mat-label&gt;
                  &lt;input type=&quot;text&quot; matInput formControlName=&quot;description&quot; required&gt;
              &lt;/mat-form-field&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/form&gt;
  </code></pre>
  <p>Child TS</p>
  <pre><code>@Component({
    selector: 'app-child',
    templateUrl: './child.component.html',
    styleUrls: ['./child.component.scss'],
    providers: [
      {
        provide: NG_VALUE_ACCESSOR,
        useExisting: forwardRef(() =&gt; ChildComponent),
        multi: true
      }
    ]
  })
  export class ChildComponent implements ControlValueAccessor, OnInit {
    newChildForm: FormGroup;
  
    constructor(private fb: FormBuilder) {
      this.createForm();
    }
  
    private createForm() {
      this.newChildForm = this.fb.group({
        description: [null, Validators.required],
      });
    }
  
    onTouched: () =&gt; void = () =&gt; { };
  
    writeValue(value: any) {
      if (value) {
        this.newChildForm.setValue(value, { emitEvent: true });
      }
    }
  
    registerOnChange(fn: (v: any) =&gt; void) {
      this.newChildForm.valueChanges.subscribe((val) =&gt; {
        fn(val);
      });
    }
  
    setDisabledState(disabled: boolean) {
      disabled ? this.newChildForm.disable() : this.newChildForm.enable();
    }
  
    registerOnTouched(fn: () =&gt; void) {
      this.onTouched = fn;
    }
  
    ngOnInit(): void {  }
  }
  </code></pre>
  <p><a href="https://stackblitz.com/edit/angular-ivy-eh2fl6?file=src/parent/parent.component.ts" rel="noreferrer">Stackblitz Link</a></p>
  <p>EDIT 2: nested approach</p>
  <p><a href="https://stackblitz.com/edit/angular-ivy-fekrkw?file=src/parent/parent.component.ts" rel="noreferrer">Stackblitz Link with Validator and ChangeDetection</a></p>