title: Angular Form validation on child components
body: <p>I've written a dynamic form in which there is a main part and sub parts based on a type that's selected in the main part (widget.type). Showing and hiding the sub parts is done with an ngSwitch.</p>
  
  <p>HTML of the form looks like this:</p>
  
  <pre><code>&lt;form class="widget-form cc-form" (ngSubmit)="saveChanges()" novalidate&gt;
    &lt;div class="forms-group"&gt;
      &lt;label for="title" i18n="@@title"&gt;Titel&lt;/label&gt;
      &lt;input class="form-control" id="title" name="title" type="text" [(ngModel)]="widget.title" required /&gt;
    &lt;/div&gt;
  
    &lt;div class="forms-group"&gt;
      &lt;label class="checkbox-label" for="show" i18n&gt;
        &lt;input id="show" name="show" type="checkbox" [(ngModel)]="widget.show" /&gt; &lt;span&gt;Titel tonen in app&lt;/span&gt;
      &lt;/label&gt;
    &lt;/div&gt;
  
    &lt;div class="forms-group"&gt;
      &lt;label for="type" i18n="@@type"&gt;Type&lt;/label&gt;
      &lt;select class="form-control" id="type" name="type" [(ngModel)]="widget.type" required&gt;
        &lt;option value="text-widget" i18n="@@Text"&gt;Tekst&lt;/option&gt;
        &lt;option value="tasklist-widget" i18n="@@Tasklists"&gt;Takenlijst&lt;/option&gt;      
        &lt;option value="image-widget" i18n="@@Text"&gt;Afbeelding(en)&lt;/option&gt;
        &lt;option value="video-widget" i18n="@@Video"&gt;Youtube&lt;/option&gt;
        &lt;option value="link-widget" i18n="@@Link"&gt;Link&lt;/option&gt;
        &lt;option value="contacts-widget" i18n="@@Contacts"&gt;Contactpersonen&lt;/option&gt;
        &lt;option value="attachment-widget" i18n="@@Attachments"&gt;Bijlage(n)&lt;/option&gt;
      &lt;/select&gt;
    &lt;/div&gt;
  
    &lt;ng-container [ngSwitch]="widget.type"&gt;
  
      &lt;text-widget *ngSwitchCase="'text-widget'" [data]="widget"&gt;&lt;/text-widget&gt;
  
      &lt;tasklist-widget *ngSwitchCase="'tasklist-widget'" [data]="widget"&gt;&lt;/tasklist-widget&gt;
  
      &lt;image-widget *ngSwitchCase="'image-widget'" [data]="widget"&gt;&lt;/image-widget&gt;
  
      &lt;video-widget *ngSwitchCase="'video-widget'" [data]="widget"&gt;&lt;/video-widget&gt;
  
      &lt;link-widget *ngSwitchCase="'link-widget'" [data]="widget"&gt;&lt;/link-widget&gt;
  
      &lt;contacts-widget *ngSwitchCase="'contacts-widget'" [data]="widget"&gt;&lt;/contacts-widget&gt;
  
      &lt;attachment-widget *ngSwitchCase="'attachment-widget'" [data]="widget"&gt;&lt;/attachment-widget&gt;
  
    &lt;/ng-container&gt;
  
  &lt;/form&gt;
  </code></pre>
  
  <p>Every widget is it's own component.</p>
  
  <p>The problem is that the form validation only checks the inputs from the main part and disregards the sub part (widget components). How can I make sure the input fields from the widgets are included in the validation?</p>
  
  <p>I tried adding an isValid() method to the widget components but I couldn't get the instances of the components, probably because they are used in an ngSwitch. @ContentChild, @ContentChildren, @ViewChild etc. all returned undefined.</p>