Pfthb

So I have got an angular 2 , specifically 6 reactive form component,
this component is embedded inside another container component , that is displayed using the angular cdk overlay.

• the overlay is the cdk overlay service, nothing weird there.


• the container component has the reactive form

Container component

<form [FormGroup]="form">
<div class="column col-5 col-mx-auto">
<reactive-form-component formControlName="dateField"></reactive-form-component>
</form>

Reactive component bellow

import Component, OnInit, forwardRef, OnDestroy from '@angular/core';
import * as moment from 'moment';

import 
 NG_VALUE_ACCESSOR,
 ControlValueAccessor,
 FormGroup,
 FormBuilder,
 FormControl
 from '@angular/forms';
import Subscription from 'rxjs';
@Component(
 selector: 'er-alt-reactive-form-component',
 templateUrl: './alt-reactive-form-component.html',
 styleUrls: ['./er-alt-reactive-form-component.css'],
 providers: [

 provide: NG_VALUE_ACCESSOR,
 multi: true,
 useClass: forwardRef(() => AltReactiveFormComponentComponent)
 
 ]
)
export class AltReactiveFormComponent implements ControlValueAccessor, 
OnDestroy 

 constructor( private _fb:FormBuilder) 
 console.log('cons')


 registerOnChange(onChange: any): void 
 console.log('c', onChange);
 console.log(this);
 // this._onChange = (x) => console
 this._onChange = onChange;
 console.log(this._onChange === onChange);
 

 registerOnTouched(onTouch: any): void 
 console.log(this);
 console.log('t', onTouch);
 this._onTouch = onTouch;
 console.log(this._onTouch === onTouch);
 

 

on touched and on change are private
very stripped down version, same error displayed though
https://angular-1tzuhj.stackblitz.io --- stackblitz preview
https://stackblitz.com/edit/angular-1tzuhj
any ideas on what the heck is happening ?

So , for the sake of posterity i leave this here, i found the issue . I used useClass instead of useExisting. which caused the issue