Angular Mater 2 Нормальный ввод

Question

Есть ли способ добиться нормального входного биокса с угловым материалом 2? такие как изображение

Когда я обращаюсь к Документам, я вижу только те входные данные, где при щелчке всплывающий текст всплывает вверх.

Answer 1

Я использую этот код в своем проекте он такой же, как ваш ввод, но в нижней части ввода есть подчеркивание

Я просто делаю некоторые изменения в mat-form-field стиле

<mat-form-field   style="padding:3px;border-radius:60px;border-style:solid; border-color:#c0bfbf91;border-width:1px">
    <input matInput  value="Sushi">
  <mat-icon  matSuffix>search</mat-icon>
      <mat-placeholder style="margin-left:20px">Favorite food</mat-placeholder>
  </mat-form-field>

Answer 2

Вы можете использовать floatLabel="never" в поле формы вашего циновки:

<mat-form-field appearance="legacy" floatLabel="never">
    <mat-label>Search here</mat-label>
    <input matInput>
    <mat-icon matSuffix>search</mat-icon>
</mat-form-field>

Вы не можете комбинировать его с appearance="outline", как на вашем примере изображения, как указано в документах :

Примечание: только устаревшая версия поддерживает опцию never. никогда не был изначально добавлен как способ заставить плавающую метку эмулировать поведение стандартного входного заполнителя Однако поле формы теперь поддерживает как плавающие метки, так и заполнители. Поэтому в устаревших версиях опция never была отключена в пользу только использования заполнителя.