如何从Angular Material的必填字段中删除星号，并在标签旁边添加（可选）以添加可选标签

Question

我正在为窗体字段使用angular 2材质设计。 因此，每个不需要的字段都以星号出现，这是我不想要的。此外，对于非必填字段，我希望可选文本出现在标签旁边的方括号中。

我正在使用类似下面的方法来实现它，但这是行不通的。

我的代码-

<md-input required md-no-asterisk id="" placeholder="First Name" [(ngModel)]="" ngControl="txtFirstName" #firstName="ngModel"></md-input>

当我删除md-input的开始和结束标签并仅使用输入标签时，星号消失了，但是一些默认的文本显示为该字段的值。

我想使用必填字段和可选字段作为标签。

任何帮助将非常感激。

Answer 1

对于仍在寻找答案的人。 对于Angular材质5和6。可以使用[hideRequiredMarker]="hideRequired" 。 在您的组件中，您可以将其值提供为hideRequired =“ true”。 这样，您可以根据需要显示或隐藏星号。 但是此指令是<mat-form-field>的一部分， 而不是input元素的一部分 。

<mat-form-field [hideRequiredMarker]="hideRequiredMarker">
  <input matInput placeholder="Simple placeholder" required>
</<mat-form-field>

确保检查角钢和角钢的版本。 这些应该匹配。 否则，您会得到错误。 谢谢

Answer 2

因此，根据我的评论，我查看了Angular Material的网站。

看：

如您所见，有一个after组件，其中包含星号。 用您自己的CSS重写该类以摆脱它。

编辑：使用相同的原理为非必填字段添加您的(optional)文本。