有没有一种方法来显示带有标签的静态文本，以一种角度材料的形式，样式类似于输入，这样它们就可以共享排版？

Question

我正在构建一个具有角度材料的表单。在某些地方，我想包括静态文本和一个样式就像表单输入的标签，除了没有交互性和下划线之外，就像这样。

​

​

我已经能够通过一个自定义类来破解这个问题：

      <mat-form-field floatLabel="always" class="static-text">
        <input matInput disabled placeholder="My Label" value="My Text" />
      </mat-form-field>

      .static-text {

        :disabled {
          color: black;
        }

        ::ng-deep .mat-form-field-underline {
          display: none;
        }
      }

但是，我必须同时包含disabled属性和自定义类。我还尝试使用带有内置角度材质排版类的静态文本元素，但这些元素不能正确显示，因为没有包装它们的mat-form-field元素。

<div>
    <p class="mat-caption">My Label</p>
    <p class="mat-body">My Text</p>
</div>

实际上有没有一种内置的方法，或者是另一种标准的实现？

Answer 1

你还可以做另一个简单的破解

在angular material中有许多按钮类型，您可以选择垫上的按钮，并可以将css属性作为pointer-events: none;应用

这将作为您想要的简单标签..！！

Answer 2

据我所知，Angular Material在他们的API中没有这个选项。你要找的是一个原生的Angular或HTML。

在Angular中，do：[disabled]="true" (或者用true条件代替true)。在Angular中，你也可以做[readonly]="true"。