bearbeiten Formularfeld Etiketten in Winkel 2

Question

Ich habe ein baute eine modellgetriebene (reaktiv) Form, wie here gezeigt, in Angular 2.

Meine html wie folgt aussieht:

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

In meinem .ts-Datei:

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);   
    }); 
} 

ich das required Attribut in meiner Vorlage als auch hinzugefügt haben, wie durch angular docs

vorgeschlagen

Zitiert:

erforderlich bleibt, nicht für die Validierung (das werden wir decken im Code), sondern für CSS-Styling und Zugänglichkeit.

Was ich will, ist, um durch jedes Formularfeld und fügen Sie ein * zu dem zugehörigen Etikett, wenn das Feld required ist.

So First Name liest First Name *; und so weiter.

Wie würde ich das machen? Vielen Dank.

Answer 1

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

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

Da die Wähler jedes Element entspricht, auf dem required Attribut hat, wird sie auf alle Elemente angewendet, wo das Etikett aktualisiert werden soll.

Leider wird nativeElement.labels nur in Chrome unterstützt. Für andere Browser ist eine andere Strategie erforderlich, um das Label einem Eingabeelement zuzuweisen (Siehe auch Find html label associated with a given input)