title: how to integrate validity of nested form in the main form
body: <p>I have a component <code>A</code> which looks like this</p>
  
  <p><a href="https://i.stack.imgur.com/5DPad.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5DPad.png" alt="enter image description here"></a></p>
  
  <p>In summary, a user can create different sections/answers and can save them. A rectangular button is created for each saved answer. Internally, all this is saved in Forms and is validated. I am using <code>ace-editor</code> which already provides capability to use the editor as form control.</p>
  
  <p>snippet from A.ts</p>
  
  <pre><code>  createForm() {
      this.codeEditorForm = this.fb.group({
        answer: [null, [this.validateThereIsAtleastOneSavedAnswer(this.answers),this.validateThereIsNoUnsavedAnswer(this.answers)]],
      });
    }
  </code></pre>
  
  <p>snippet from A.html</p>
  
  <pre><code>&lt;ace-editor id="editor" class="form-control" formControlName="answer" [ngClass]="validateField('answer')" [(text)]="text"&gt;&lt;/ace-editor&gt;
  </code></pre>
  
  <p>I want to use this component as a form control in other components. For eg. I have another component <code>B</code> which also has a <code>form</code> </p>
  
  <p>B.ts
      this.bForm = this.fb.group({
            field1: [null],
            field2: [null],
            field3: [null, Validators.required],
            field4: [null], 
            field5: [null], //the value of A maps to this field of the form in B
            field6: [null]
          },);
        }</p>
  
  <p>B.html</p>
  
  <pre><code>&lt;A #a [readonlyFormStatus]="readonlyFormStatus" (answerSectionsEmitter)="handleAEvent($event)" class="form-control" formControlName="field5" [ngClass]="validateField('field5')" &gt;&lt;/A&gt;
  </code></pre>
  
  <p>I want that when <code>bform</code> is submitted only when validation of both <code>bForm</code> and <code>aForm</code> have passed.</p>
  
  <p>What would be the right way to do this following Angular design philosophy?</p>