title: NG_VALUE_ACCESSOR not executing validations on dynamic component loader
body: <p>I am trying to add a validator to my dynamic component loader, however, it doesn't seem to be working. What is it that I am missing? <a href="https://stackblitz.com/edit/angular-ivy-1pfwdq" rel="nofollow noreferrer">Stackblitz</a></p>
  <p>Here is how my form is setup. I have an button that checks the forms <code>invalid</code> property, it should then toggle on/off based on if the component loader is valid.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;form #f=&quot;ngForm&quot; class=&quot;role-add-modify&quot; autocomplete=&quot;off&quot;&gt;
    &lt;div *ngFor=&quot;let field of fields;index as idx&quot;&gt;
      &lt;ui-component-loader #componentLoader
                           [(ngModel)]=&quot;field.value&quot; [name]=&quot;field.id&quot;
                           [required]=&quot;field.required&quot; [field]=&quot;field&quot;
                           [disabled]=&quot;field.disabled&quot;
                           *ngIf=&quot;field.component&quot;&gt;
      &lt;/ui-component-loader&gt;
    &lt;/div&gt;
    &lt;button *ngIf=&quot;state === ModalEditState.Edit&quot; (click)=&quot;editItem()&quot;
            [disabled]=&quot;f.invalid || !f.dirty&quot;&gt;Save Edits
    &lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  <p>Next I have the component loader which implements <code>ControlValueAccessor</code>. in the parent class <code>AccessorComponent</code> (already works on components with a input in the template).</p>
  <pre class="lang-js prettyprint-override"><code>@Component({
    selector: 'ui-component-loader',
    template: '&lt;ng-template componentHost&gt;&lt;/ng-template&gt;'
  })
  export class ComponentLoaderComponent&lt;T extends IComponentLoader&gt; extends AccessorComponent implements OnInit {
    public get invalid() {
      console.log('invalidator');
      return (!this.componentRef?.instance.validate()) || true;
    }
  
    public get valid() {
      console.log('validator');
      return this.componentRef?.instance.validate() || false;
    }
  
    public ngOnInit() {
      this.loadComponent();
    }
  
    public loadComponent() {
      // Dynamically loads the component and saves it to `componentRef`
      const componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.field.component);
  
      const viewContainerRef = this.componentHost.viewContainerRef;
      viewContainerRef.clear();
  
      this.componentRef = viewContainerRef.createComponent(componentFactory);
    }
  }
  </code></pre>
  <p>Finally, I added the providers to my <code>@NgModule</code> as noted <a href="https://stackoverflow.com/questions/39809084/injecting-ngcontrol-in-custom-validator-directive-causes-cyclic-dependency">here</a> (I am not sure if both providers are needed or not).</p>
  <pre class="lang-js prettyprint-override"><code>@NgModule({
    providers: [
      { provide: NG_VALIDATORS, useExisting: ComponentLoaderComponent, multi: true },
      { provide: NG_VALUE_ACCESSOR, useExisting: ComponentLoaderComponent, multi: true }
    ]
  })
  export class UIModule { }
  </code></pre>
  <p>The html inside of the component that gets loaded by the <code>ComponentLoaderComponent</code> looks like this:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div *ngFor=&quot;let item of displayData;index as idx&quot; [id]=&quot;'client-role_'+idx&quot;&gt;
    &lt;select-field&gt;
      &lt;select-options
            (onDropdownChange)=&quot;onClientChange(item, $event, roleSelect)&quot;
            defaultLabel=&quot;Select One...&quot;
            [(ngModel)]=&quot;item.selectedClient&quot; [required]=&quot;true&quot;
            [name]=&quot;'clients'+idx&quot;
            [itemList]=&quot;item.clients&quot;&gt;
      &lt;/select-options&gt;
    &lt;/select-field&gt;
  &lt;/div&gt;
  </code></pre>
  <p>When I make a change in the component (pictured below), I would expect <code>invalid</code> or <code>valid</code> to execute, however, neither of the two getters are getting called.</p>
  <p>The output looks like this:</p>
  <p><a href="https://i.stack.imgur.com/zteZG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zteZG.png" alt="Component" /></a></p>