title: Changes ngControl.valueAccessor for dynamically changes component
body: <p>In my Angular app I have a form with dynamically changes input components. All dynamic components are implements ControlValueAccessor.</p>
  <p>If you input value in Input and next change component (click button &quot;change component to number&quot;), then ngControl don't change his reference valueAccessor to new component. And my new Input component will not change my model. What am I doing wrong ?
  I have a example in a <a href="https://stackblitz.com/edit/dynamically-rendering-angular-ng-value-accessor-a2gxsy" rel="nofollow noreferrer">stackblitz</a>. And I have an example code.</p>
  <p>My dynamic form component:</p>
  <pre><code>@Component({
    selector: &quot;app-form-control-outlet&quot;,
    template: ``,
    providers: [
      {
        provide: NG_VALUE_ACCESSOR,
        useExisting: forwardRef(() =&gt; FormControlOutletComponent),
        multi: true
      }
    ]
  })
  export class FormControlOutletComponent implements OnChanges {
    @Input() component = CustomStringInputComponent;
  
    componentRef: ComponentRef&lt;any&gt;;
  
    constructor(
      public injector: Injector,
      private container: ViewContainerRef,
      private resolver: ComponentFactoryResolver,
      private viewContainerRef: ViewContainerRef
    ) {}
  
    public ngOnChanges(changes: SimpleChanges): void {
      const factory = this.resolver.resolveComponentFactory(this.component);
  
      const componentFactory = this.resolver.resolveComponentFactory(
        this.component
      );
  
      if (this.container.length &gt; 0) {
        this.container.clear();
      }
  
      this.componentRef = this.viewContainerRef.createComponent(componentFactory);
  
      const ngControl = this.injector.get(NgControl);
      ngControl.valueAccessor = this.componentRef.instance;
    }
  }
  </code></pre>
  <p>And one of my dynamic Input</p>
  <pre><code> @Component({
    selector: &quot;app-custom-input&quot;,
    template: `
      &lt;input
        [(ngModel)]=&quot;value&quot;
        (ngModelChange)=&quot;onValueChange($event)&quot;
        (blur)=&quot;onInputBlurred()&quot;
      /&gt;
    `,
    providers: [
      {
        provide: NG_VALUE_ACCESSOR,
        useExisting: forwardRef(() =&gt; CustomStringInputComponent),
        multi: true
      }
    ]
  })
  export class CustomStringInputComponent implements ControlValueAccessor {
    public value: string;
    public onChange: (value: string) =&gt; void;
    public onTouched: () =&gt; void;
  
    public writeValue(value: string): void {
      this.value = value;
    }
  
    public registerOnChange(fn: (value: string) =&gt; void): void {
      this.onChange = fn;
    }
  
    public registerOnTouched(fn: () =&gt; void): void {
      this.onTouched = fn;
    }
  
    public onValueChange(value: string): void {
      this.writeValue(value);
      this.onChange(value);
    }
  
    public onInputBlurred(): void {
      this.onTouched();
    }
  }
  </code></pre>