Mat-error not triggering in custom phone input component implementing ControlValueAccessor and Validator

Question

I am trying to create a custom phone input component by implementing ControlValueAccessor and Validator in Angular, but I have an issue with mat-error not triggering. The FormGroup seems to work, as it detects value changes and correctly identifies if the phone number is invalid. The FormGroup errors include { "notValidNumber": true }, but somehow the phone input doesn't get the information back that its errorState should be true.

Is there a manual way to trigger the errorState for the input component mat-form-field, or can you suggest any other solution?

Here is the code for the parent component:

<form [formGroup]="formGroup">
...
        <div>
            <app-phone-input formControlName="phone" [phoneNumber]="this.entryAddEditService.entryObject.mobile!">
            </app-phone-input>
        </div>
...
</form>

        this.formGroup = this.formBuilder.group({
            ...
            phone: [this.entryAddEditService.entryObject.mobile],
            ...
              }); 

And here is the code for the input component:

<mat-form-field floatLabel="always">
    <mat-label>{{ "sk.entry.infoPhone" | translate }}:</mat-label>
    <input matInput id="info-phone"/>
    <mat-error>
    "}}
    </mat-error>
</mat-form-field>

@Component({
    selector: 'app-phone-input',
    templateUrl: './phone-input.component.html',
    styleUrls: ['./phone-input.component.scss'],
    providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            useExisting: PhoneInputComponent,
            multi: true
        },
        {
            provide: NG_VALIDATORS,
            useExisting: PhoneInputComponent,
            multi: true
        }
    ]
})

export class PhoneInputComponent implements ControlValueAccessor, Validator {
...


    validate(_: AbstractControl): ValidationErrors | null {
        if (this.phoneInput && !this.phoneInput.isValidNumber() && this.phoneInput.getNumber()) {
            return { "notValidNumber": true };
        }
        return null;
    }
...

I expect that it should show input surrounded with red border and show my error message.