Question

我在Angular 2中构建了一个模型驱动（反应）形式，如here所示。

我的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>

在我的.ts文件中：

import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms';
...

ngOnInit() {
    this.paymentForm = this.formBuilder.group({
        firstname: ['', Validators.required],
        lastname: ['', Validators.required],
        email: ['',],


    })

    this.userForm.valueChanges.subscribe(value => {
        console.log(value);           
    });
}

我也在我的模板中添加了required属性，如angular docs

所示

引用：

需要保留，不是用于验证目的（我们将在代码中介绍），而是用于CSS样式和可访问性。

我想要的是循环浏览每个表单字段，如果字段为*，则将required添加到关联的标签。

所以，First Name读取First Name *;等等。

我将如何做到这一点。感谢。

Answer 1

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

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

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

可悲的是nativeElement.labels仅在Chrome中受支持。对于其他浏览器，需要另一种策略来获取与输入元素关联的标签（另请参阅Find html label associated with a given input）

以角度2编辑表单字段标签

1 个答案: