Override ngControl in component providers

[mariusbrinzaru]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[x ] Support request
[ ] Other... Please describe:

Current behavior

I have PatientCreditCardComponent that extends BaseCompositeFormField
`
export abstract class BaseCompositeFormField implements Validator, OnInit, OnDestroy {
public form: FormGroupTyped;
protected _destroy$: Subject = new Subject();

constructor(@optional() @self() public controlDir: NgControl) {
// bind the CVA to our control
controlDir.valueAccessor = this;
}

ngOnInit(): void {
let control = this.controlDir.control;
this.initForm(control.validator);

`
and i am trying to test the PatientCreditCardComponent but i get the following error =>

here is a relevant snippet of my spec

Expected behavior

To inject or override ngControl in order to let me test

Minimal reproduction of the problem with instructions

For bug reports please provide the STEPS TO REPRODUCE and if possible a MINIMAL DEMO of the problem via
https://stackblitz.com or similar (you can use this template as a starting point: https://bit.ly/2zme3bj).

What is the motivation / use case for changing the behavior?

Environment

Angular version: 10.2.4


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

[mariusbrinzaru]

@dirkluijk

[KirillGordineRhenag]

More like @NetanelBasal as he published an article about this way to add validators to ValueAccessors - https://netbasal.com/adding-integrated-validation-to-custom-form-controls-in-angular-dc55e49639ae