Wie style Eingabe mit optionalem Wert

Question

Ich habe ein Eingabefeld mit optionalem Wert (nicht erforderlich). Wenn ich mit ihm interagieren, erhalte ich Klassen ng-dirty, ng-valid, ng-touched

 <input type="text" formControlName="url" 
      [class.has-value]="quickSetupForm.controls.url.value !== ''" 
      placeholder="www.example.com" 
      id="url"> 

    input.ng-valid.ng-dirty.has-value 
    border-bottom 2px solid green 

Was ist der beste Weg, hat Wert Check für alle formControls zu tun? Oder gibt es einen anderen Weg, dies zu tun?

möchte ich nicht input.ng-valid.ng-dirty Wählereingänge zu beeinflussen, die nicht erforderlich sind, aber Benutzer eingegeben und gelöscht etwas (sie machen dirty, touched, valid).

Answer 1

Ich habe es mit dieser Richtlinie:

/* tslint:disable:directive-selector-prefix */ 
import { Directive, ElementRef, HostListener, Renderer } from '@angular/core'; 

@Directive({ 
    selector: '[formControlName]' 
}) 
export class FormControlValueDirective { 
    private control: HTMLInputElement; 

    constructor(
    private renderer: Renderer, 
    private elementRef: ElementRef) { 
    this.control = this.elementRef.nativeElement; 
    } 

    @HostListener('input') onInput() { 
    if (this.control instanceof HTMLInputElement) { 
     this.renderer.setElementClass(this.control, 'has-value', this.control.value !== ''); 
    } 
    } 
}