Angular Mater 2法线输入

Question

有没有一种方法可以用角形材料2达到正常的输入生物体？例如图片

每当我引用“文档输入”时，仅在单击占位符文本时会看到浮动的输入。

Answer 1

您可以在{mat}字段中使用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>

您无法像docs中所述的示例图片中将其与appearance="outline"结合使用：

  

注意：仅旧外观支持Never选项。最初从未添加从未将它作为使浮动标签模仿标准输入占位符的行为的方式。但是，表单字段现在支持浮动标签和占位符。因此，在非旧版外观中，从不禁用Never选项，而仅使用占位符。

Answer 2

我在项目中使用此代码 它与您的输入相同，但在输入的底部带有下划线

我只是以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>