Как стиль Ввод с дополнительным значением

Question

У меня есть поле ввода с дополнительным значением (не обязательно). Когда я общаюсь с ним, я получаю классы 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 

Какой самый лучший способ сделать имеет-значение чек на все formControls? Или есть другой способ сделать это?

Я не хочу input.ng-valid.ng-dirty селектора влиять на входы, которые не требуется, но пользователь вошел и удалил что-то (что делает их dirty, touched, valid).

Answer 1

Я сделал это с этой директивой:

/* 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 !== ''); 
    } 
    } 
}