mat-form-field required field is showing red asterik even if there is no error in Angular

Issue

Iam facing the issue that mat-form-field required asterik even if there is no error. I would like to show blue asterik if there is no error. I have spent a lot of time but I am not able to fogure it out. If anyone knows what is wrong then please let me know. Thank you

  <mat-form-field appearance="outline" class="input-field-large input-normal-wide" matInput>
                    <mat-label>Name</mat-label>
                    <input
                        (input)="onNameChange()"
                        formControlName="name"
                        type="text"
                        autocomplete="off"
                        matInput
                        maxlength="50"
                        required="required"
                    />
                    <mat-icon
                        *ngIf="form.hasError('required', 'name') && isNameSubmitted"
                        class="mdi mdi-24px mdi-alert-circle"
                        matSuffix
                    >
                    </mat-icon>
                    <mat-error *ngIf="form.hasError('required', 'name') && isNameSubmitted">
                        <span>{{ "This field is mandatory" | translate }}</span>
                    </mat-error>
                    <mat-error *ngIf="form.hasError('maxlength', 'name') && isNameSubmitted">
                        <span>{{ "Maximum 50 charachers are allowed" | translate }}</span>
                    </mat-error>
                </mat-form-field>

Solution

It can be done as follow:

::ng-deep .mat-form-field.mat-focused {
    .mat-form-field-required-marker {
        color: blue;
    }
}

::ng-deep .mat-form-field.mat-form-field-invalid {
    .mat-form-field-required-marker {
        color: red;
    }
}

Answered By - H S Progr