Как мне заставить заполнитель отображаться при заполнении Angular Material Datepicker?

#angular #datepicker #angular-material

#angular #указатель даты #angular-material

Вопрос:

Я использую функциональность Angular Material Datepicker. Он работает нормально, кроме заполнителя. В документах заполнитель становится маленькой меткой, когда входные данные заполняются датой. Мой исчезает.

Я пытался изменить css, чтобы заставить его работать, и даже безуспешно пытался использовать mat-label.

 <input matInput [matDatepicker]="payBeginningDate" formControlName="payBeginningDate" id="payBeginningDate" placeholder="Beginning Date">
<mat-datepicker-toggle matSuffix [for]="payBeginningDate"></mat-datepicker-toggle>
<mat-datepicker #payBeginningDate></mat-datepicker>

Я просто хочу, чтобы заполнитель «Дата начала» сжимался над полем даты, как метка, как это делается в документах.

1. Ваша метка действительно полностью исчезает? Даже до внесения каких-либо изменений в CSS?

2. ДА… как только я начинаю заполнять дату, она исчезает вместо анимации над ней, как «обычное» поле ввода mat.

Ответ №1:

Попробуйте приведенный ниже код;

импортируйте приведенный ниже файл CSS в свой код;

 @import "~@angular/material/prebuilt-themes/indigo-pink.css";

    <mat-form-field>
<input matInput [matDatepicker]="payBeginningDate" formControlName="payBeginningDate" id="payBeginningDate" placeholder="Beginning Date">
<mat-datepicker-toggle matSuffix [for]="payBeginningDate"></mat-datepicker-toggle>
<mat-datepicker #payBeginningDate></mat-datepicker>
</mat-form-field>

1. импортируйте CSS-файл indigo-pink в свое приложение.css @import «~@angular/material /prebuilt-themes/indigo-pink.css»;

2. У меня уже есть это в моем styles.css… @import ‘~@angular/material/prebuilt-themes/deeppurple-amber.css’;

3. @ClayHess Я только что обновил свой код, попробуйте еще раз. вам нужно добавить тег <mat-form-field> для вашего ввода

4. Спасибо за обновление, но у меня уже были такие, которые были обернуты вокруг моего кода. Я просто не включил их в свой фрагмент кода.

Ответ №2:

У меня работает мат-метка над вводом внутри мат-формы-поля, но это может быть потому, что я использую внешний вид контура.

 <mat-form-field appearance="outline">
  <mat-label>Beginning Date</mat-label>
  <input matInput [matDatepicker]="payBeginningDate" 
        formControlName="payBeginningDate" id="payBeginningDate" placeholder="Beginning Date">
  <mat-datepicker-toggle matSuffix [for]="payBeginningDate"></mat-datepicker-toggle>
  <mat-datepicker #payBeginningDate></mat-datepicker>
</mat-form-field>