Редактирование полей формы этикетки в угловом 2

Question

У меня есть построили модель с приводом (реактивную) форму, как показано here, в угловых 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> 

В моей 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)