Binding the colorPicker to an input in a Template-Driven Form

[juaal12]

Describe the bug
When connecting the color picker to an input in a template-driven form and trying to validate the formControl and show a possible form error using mat-error, it does not work.

To Reproduce
Steps to reproduce the behavior:

        <div fxFlex="none" fxLayoutGap="10px">
          <mcc-color-picker fxFlexAlign="center" mccConnectedColorPicker [mccConnectedColorPickerOrigin]="trigger" hideUsedColors="true" hideButtons="true">
            <mcc-color-picker-collection *ngFor="let color of colors; let i = index" hideEmpty="true" [colors]="color" [size]="color.length">
            </mcc-color-picker-collection>
          </mcc-color-picker>
          <mat-form-field fxFlex>
            <input matInput i18n-placeholder="@@productColor" placeholder="Color" formControlName="color" mccColorPickerOrigin #trigger="mccColorPickerOrigin" autocomplete="off" required/>
            <mat-error *ngIf="productForm.get('color')?.errors && (productForm.get('color')?.dirty || productForm.get('color')?.touched)">
              <span *ngIf="!!productForm.get('color').errors.required" i18n="@@productColorRequired">Color is <strong>required</strong></span>
            </mat-error>
          </mat-form-field>
        </div>

Now in your typescript:

color: ["", Validators.required]

Select a color and after that delete text in color text-input.

Expected behavior

mat-error should fire the error due too color field is required.

Additional context
The mat-error fires correctly and checks the error if mccColorPickerOrigin #trigger="mccColorPickerOrigin" are removed from the input field.