angular - Angular Mater 2 法线输入

Question

有没有办法用角材料2实现正常的输入biox？比如图片

当我参考文档时，只看到单击占位符文本浮动的输入。

Answer 1

您可以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 最初是为了让浮动标签模拟标准输入占位符的行为而添加的。然而，表单域现在支持浮动标签和占位符。因此，在非传统外观中，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>