angular - Angular 11 - 标准格式的 Mat-form-field mat-input，应该在底部的行将进入中心，直到重新加载

Question

在我不得不使用 mat-form-field 和 mat-input 的应用程序中，它在轮廓外观上工作得非常好。标准外观有一点失真，因为应该在跨度底部的线正在中间，如下图所示：

但是一旦刷新/重新加载它就会回到它应该看起来的样子。

我需要这些字段总是看起来像第二张图片，而不必每次都重新加载。如果有人知道如何解决这个问题，请告诉我。

HTML：

<div class="d-flex w-100 flex-column justify-content-center align-items-center">
<form class="d-flex flex-column w-100 justify-content-center align-items-center m-2" [formGroup]="detailsFormGroup"
    #formDirective="ngForm">
    <mat-form-field class="m-1">
        <mat-label> Phone Number: </mat-label>
        <input [readonly]="exists" [formControl]="detailsFormGroup.get('phone')" [errorStateMatcher]="matcher" matInput maxlength="10"
            type="text">
        <mat-error *ngIf="detailsFormGroup.get('phone').errors?.required">
            Phone number is <strong>required</strong>
        </mat-error>
        <mat-error *ngIf="detailsFormGroup.get('phone').errors?.minlength">
            Phone number must have <strong>10 digits</strong>
        </mat-error>
    </mat-form-field>

    <mat-form-field class="m-1 mt-2 pt-1">
        <mat-label> Name: </mat-label>
        <input [readonly]="exists" [formControl]="detailsFormGroup.get('name')" matInput [errorStateMatcher]="matcher" type="text">
        <mat-error *ngIf="detailsFormGroup.get('name').errors?.required">
            Name is <strong>required</strong>
        </mat-error>
    </mat-form-field>

    <mat-form-field class="m-1">
        <mat-label>Email</mat-label>
        <input [readonly]="exists" type="email" matInput [formControl]="detailsFormGroup.get('email')" [errorStateMatcher]="matcher"
            placeholder="Ex. pat@example.com">
        <mat-error
            *ngIf="detailsFormGroup.get('email').hasError('email') && !detailsFormGroup.get('email').hasError('required')">
            Please enter a valid email address
        </mat-error>
        <mat-error *ngIf="detailsFormGroup.get('email').hasError('required')">
            Email is <strong>required</strong>
        </mat-error>
    </mat-form-field>
    <mat-form-field>
        <mat-label>Booking</mat-label>
        <mat-select [errorStateMatcher]="matcher" [formControl]="detailsFormGroup.get('consultation')">
            <mat-option value="consultation"> Consultation </mat-option>
            <mat-option value="medicines"> Medicines </mat-option>
        </mat-select>
        <mat-error *ngIf="detailsFormGroup.get('consultation').hasError('required')">
            Please select a time for appointment.
        </mat-error>
    </mat-form-field>
</form>