Angular Mat-Form-Field - always float label in border outline

Angular Material 11

I have an existing application to which I have been asked to make changes.

I have a component that provides a Material date input box. I want the label to appear in line with the border, like this (I don't want purple, just this placement). Alternatively, there could be no placeholder, and only a label that's permanently fixed to the border of the label.



Instead, what I have is this:





HTML in displayed component:

`

<div class="form-group dueDatePop">
<app-duedate
[parentForm]="myForm"
[controlName]="'EndDate'"
[placeholder]="'End Date'"
tabindex="13"
></app-duedate>
</div>


` app-duedate html:

`

<ng-template #inputContent>
<mat-label></mat-label>
<mat-form-field appearance="outline">
<input
class="form-control"
[placeholder]="placeholder"
matInput
[matDatepicker]="dp"
[formControlName]="controlName"
maxlength="10"
/>
<mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
<mat-datepicker #dp></mat-datepicker>
</mat-form-field>
</ng-template>


`

Having the empty and including a placeholder is turning the placeholder into a label, which is close to the correct behavior, but it's in the wrong place. I want it in line with, not above, the outline.

I was able to push the .mat-form-field-label into a new position using padding, but the border runs right through it. Setting a background-color looks worse, since the placeholder label is taking up the whole width of the top border.

`

::ng-deep .date-picker-form-field-as-placeholder .mat-form-field-label{
padding-left: 0px;
padding-top: 7.5px;
}


`





I also tried appearance="legacy", providing actual text in the mat-label

Continue reading...