CODEWITHSUNDEEP
cssangular-materialangular6
user9620181
user9620181

Reputation:

mat-prefix to work on the input not the label

So using material we have some code to ask a question, the input we would like to add a $ sign to the front of or use a place holder. inside of this mat field we also have a mat-label. If I use matprefix it puts the dollar sign infront of the label not the input field. Can anyone suggest a way to do this?

<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>

Upvotes: 4

Views: 20671

Answers (2)

Akshay
Akshay

Reputation: 81

This one works for me after spending so much time.

HTML

<mat-form-field appearance="outline">
    <mat-label>Amount</mat-label>
    <span matPrefix>$ &nbsp;</span>
    <input matInput placeholder="0" formControlName="amount">
</mat-form-field>

CSS

.mat-form-field.mat-form-field-should-float .mat-form-field-infix{
    position: initial;
}
.mat-form-field.mat-form-field-should-float .mat-form-field-label-wrapper{
    top: 0;
    left: 15px;
}

Upvotes: 2

IvanS95
IvanS95

Reputation: 5742

Take a look at this example, try comparing that with your code, matPrefix and matSuffix should not collide with any labels placed on the form field. Keep in mind since you are using Angular Material you should stick to the structures provided in the framework, in this case, you should use a mat-label tag instead of just label

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

Upvotes: 5

Related Questions