Angular中的反应形式，带有材料库.添加验证后，显示的消息位从确切的表单字段边界偏移

Question

html : <div style="margin-left:20px;">
<h3>Add New Shop</h3>
<div class="example-container">
<form
[formGroup]="addShopFormGroup"
(ngSubmit)="onSubmit()"
class="example-form"
>
<p>
<mat-form-field appearance="outline" class="example-full-width">
<mat-label>Shop Name</mat-label>
<input matInput [ngModel]="shopName" formControlName="shopName" />
<mat-hint *ngIf="checkError('shopName', 'required')"
>Shop Name is required</mat-hint
>
<mat-error *ngIf="checkError('shopName', 'minlength')"
>Shop Name should be more than 5 characters</mat-error
>
<mat-error *ngIf="checkError('shopName', 'maxlength')"
>Shop Name should be less than 20 characters</mat-error
>
</mat-form-field>
</p>
<p>
<mat-form-field appearance="outline" class="example-full-width">
<mat-label>Shop Address</mat-label>
<textarea matInput formControlName="shopAddress"></textarea>
<mat-error *ngIf="checkError('shopAddress', 'required')"
>Shop Address is required</mat-error
>
<mat-error *ngIf="checkError('shopAddress', 'maxlength')"
>Shop Address should be less than 200 characters</mat-error
>
</mat-form-field>
</p>
<p>
<img mat-card-sm-image />
</p>
<button type="submit" [disabled]="!addShopFormGroup.valid">Submit</button>
</form>

css : p {
font-family: Lato;
}

这就是我得到的输出。

这是所需的输出，其中所需的消息必须正好在表单字段的边界以下开始。

• 前提是，我不应该将材料形式的外观更改为"；大纲">

Answer 1

添加以下CSS：

:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-subscript-wrapper {
padding: 0;
}

请参阅分叉的片段。