css - mat-prefix 用于输入而不是标签

Question

所以使用 Material 我们有一些代码来问一个问题，我们想在输入的前面添加一个 $ 符号或使用占位符。在这个垫子字段内部，我们还有一个垫子标签。如果我使用 matprefix，它会将美元符号放在标签而不是输入字段的前面。谁能建议一种方法来做到这一点？

<mat-form-field floatLabel="always" class="fb-form-field fb-auto-detail-question-group">
        <!-- <mat-label class="fb-question-label">Amount of service or tow? </mat-label> -->
        <label class="sub">What was the amount of the service or tow bill?<span class="frm__label--required">*</span></label>
        <input matInput formControlName="serviceBillAmount" class="fb-form-auto-input"  />
        <span matPrefix>$&nbsp;</span>
        <mat-error *ngIf="fieldInvalid('serviceBillAmount')"> The dollar amount you entered is invalid. Please try again.</mat-error>
    </mat-form-field>

Answer 1

看看这个例子，尝试将其与您的代码进行比较，matPrefix 和 matSuffix 不应与放置在表单字段上的任何标签发生冲突。请记住，由于您使用的是 Angular Material，因此您应该坚持框架中提供的结构，在这种情况下，您应该使用 mat-label 标签，而不仅仅是 label

https://stackblitz.com/edit/angular-j4eagb