ControlValueAccessor inside ng-content

Question

I prepared a simple example when we have 2 ColorPickerComponent. One is rendered directly on the App component, one is pushed down the tree as a child to be projected inside WrapperComponent

First one works fine:

    <div [formGroup]="form1">
      <app-color-picker formControlName="hex"></app-color-picker>
      VAL: {{ form2.value | json }}
    </div>

Second one is throwing an error that value accessor cannot be found. I know Angular is projecting the content but all that it needs is defined within the component itself. So why having trouble with finding a ControlValueAccessor?

    <app-wrapper>
      <div [formGroup]="form2">
        <app-color-picker formControlName="hex"></app-color-picker>
        VAL: {{ form2.value | json }}
      </div>
    </app-wrapper>

Here is the error:

ERROR
Error: Uncaught (in promise): InvalidCharacterError: Failed to execute 'setAttribute' on 'Element': ';' is not a valid attribute name.
Error: Failed to execute 'setAttribute' on 'Element': ';' is not a valid attribute name.

Here is the example: https://stackblitz.com/edit/angular-tfp9jw?file=src%2Fmain.ts

and a repo: https://github.com/PWrGitHub194238/angular-tfp9jw