Forms 在angular 2中编辑表单字段标签

我构建了一个模型驱动（反应）表单，如图2所示

我的html如下所示：

<form [formGroup]="userForm" (ngSubmit)="onSubmit(userForm.value, userForm.valid)">
    <label for="firstName">First Name:</label>
    <input type="text" formControlName="firstname" id="firstName" required>

    <label for="lastname">Last Name:</label>
    <input type="text" formControlName="lastname" id="lastName" required>

    <br>

    <label for="email">Email:</label>
    <input type="email" formControlName="email" id="email">

    <br>
</form>

我也在模板中添加了

required

属性，正如

引述：

仍然需要，不是为了验证目的（我们将在代码中介绍），而是为了css样式和可访问性

我想要的是在每个表单字段中循环，如果字段是

必需的，则在相关标签中添加一个
*

所以，
First Name
读作
First Name*
；等等

我该怎么做呢。谢谢

@Directive({
  selector: '[required]'
})
export class LabelRequiredDirective {
  constructor(private elRef:ElementRef){}

  ngAfterContentInit() {
    this.elRef.nativeElement.labels.forEach(l => l.textContent += ' *');
  }
}

由于选择器匹配具有
required
属性的每个元素，因此它将应用于应该更新标签的所有元素

遗憾的是，
nativeElement.labels
仅在Chrome中受支持。对于其他浏览器，需要另一种策略来获取与输入元素相关联的标签（另请参见）
如果字段是必需的，这是什么意思？您是否仍然希望或计划保留
required
属性，还是应该将其删除？@GünterZöchbauer:我仍然计划保留该属性。我只想更新标签。基本上，如果我有10个字段和8个必填字段，我希望这8个字段的标签能够自动编辑，而不必手动添加/删除星号。感谢您的回答。我会试试看，然后告诉你。我无法让它工作。我创建了一个新文件，将代码放入其中；包括在我的app.module声明中。由于没有涉及自定义名称，我没有编辑表单模板。我需要吗？（顺便说一句，我通过说
导出类LabelRequiredDirective
和
this.elRef.nativeElement
修复了一些TS错误。我希望这没问题。）听起来不错。您是否检查了构造函数和
ngAfterContentInit
是否被调用？是的，它们正在被调用
this.elRef.nativeElement
按预期返回元素；但是标签数组是空的。我正在登记最新的chrome浏览器。不管怎样，我现在明白要点了。我可以从这里开始。谢谢你的帮助。对我有用
for=“lastname”
不起作用，因为
id=“lastname”
的大写字母不同
N
。但它增加了
*
。我没有花太多的时间来思考这个问题。您还可以使用
@HostBinding（'class.required'）isRequired=true添加CSS类；并添加
*`使用CSS（例如使用内容）。
@Directive({
  selector: '[required]'
})
export class LabelRequiredDirective {
  constructor(private elRef:ElementRef){}

  ngAfterContentInit() {
    this.elRef.nativeElement.labels.forEach(l => l.textContent += ' *');
  }
}