Josep Piguillem
23f2c5404f
An empty matPrefix container still made Material reserve room for an icon, pulling the text 12px left of every other field. The prefix is only rendered when a pi-prefix is projected. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
38 lines
1.0 KiB
HTML
38 lines
1.0 KiB
HTML
<mat-form-field [appearance]="appearance()" floatLabel="always">
|
|
<mat-label><ng-content select="pi-label"></ng-content></mat-label>
|
|
|
|
<!--
|
|
Only when something is actually projected. An empty `matPrefix` container
|
|
still makes Material treat the field as having an icon prefix, which
|
|
reserves space and pulls the text 12px left of every other field.
|
|
-->
|
|
@if (hasPrefix()) {
|
|
<ng-container matPrefix>
|
|
<ng-content select="pi-prefix"></ng-content>
|
|
</ng-container>
|
|
}
|
|
|
|
<ng-container matSuffix>
|
|
<ng-content select="pi-suffix"></ng-content>
|
|
</ng-container>
|
|
|
|
<input
|
|
[value]="rawValue()"
|
|
(input)="rawValue.set($any($event.target).value)"
|
|
(focus)="onFocus()"
|
|
(blur)="onBlur()"
|
|
[placeholder]="placeholder()!"
|
|
matInput
|
|
type="number"
|
|
pi-autofocus
|
|
[isAutofocusSelected]="isAutofocus()"
|
|
/>
|
|
@if (enableErrorMessage() && hasError()) {
|
|
<mat-error>
|
|
@for (message of errorMessages(); track message) {
|
|
{{ message | translate }}
|
|
}
|
|
</mat-error>
|
|
}
|
|
</mat-form-field>
|