Globale Richtlinie auf (ändern) verhindert, dass einige gebundene Methoden lokal zu einer Komponente ausgeführt werden

Question

Wir möchten .trim() alle Eingaben in einem ziemlich großen angular2-Projekt. Alle unsere Formulare sind vorlagenbasierte, nicht reaktive Formulare. Da ich nicht jeden einzelnen Input, den wir haben, umgestalten möchte, dachte ich, eine Richtlinie wäre der richtige Weg.

Darüber hinaus hängen verschiedene Komponenten (input) oder (change) Listener an (z. B. zu Großbuchstaben in einem Feld als Benutzertypen).

unter Meiner Implementierung von this Plunker (geschrieben von einem Angular Beitrag als Antwort auf this bug) genommen und this solution (die Angular2 Finale früher und ist in seinem aktuellen Zustand nicht praktikabel).

Mit dem folgenden Code werden meine Methoden auf Komponentenebene nicht mehr aufgerufen (wie die oben erwähnte Eingabe-in-Großbuchstabe).

Bearbeiten: Es scheint, dass mindestens einige Component-Ebene (blur) Methoden immer noch aufgerufen werden.

Ich stelle mir vor, dass ich etwas wie einen Anruf verpasse, um die Ausführung an die Komponente weiterzugeben?

Ich habe versucht:

• Reordering my declarations und das nicht helfen,
• Implementierung ControlValueAccessor statt DefaultValueAccessor.

Vielleicht etwas mit der forwardRef?

Meine Trim-Richtlinie:

import { Directive, Renderer, ElementRef, forwardRef } from "@angular/core"; 
import { DefaultValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms"; 

const TRIM_VALUE_ACCESSOR = { 
    provide: NG_VALUE_ACCESSOR, 
    useExisting: forwardRef(() => TrimValueAccessor), 
    multi: true 
}; 

@Directive({ 
    selector: 'input[type=text]', 
    host: { '(change)': 'trim($event.target.value)' }, 
    providers: [TRIM_VALUE_ACCESSOR] 
}) 

export class TrimValueAccessor implements DefaultValueAccessor { 

    onChange = (_: any) => {}; 
    onTouched =() => {}; 

    constructor(private renderer: Renderer, private elementRef: ElementRef) {}; 

    trim(value: any): void { 
     if (value) { 
      value = value.toString().trim(); 
      this.writeValue(value); 
     } 
     this.onChange(value); 
    }; 

    registerOnChange(fn: (value: any) => any): void { this.onChange = fn; } 

    registerOnTouched(fn:() => any): void { this.onTouched = fn; } 

    writeValue(value: any): void { 
     this.renderer.setElementProperty(this.elementRef.nativeElement, 'value', value); 
    } 
} 

Diese global mit einem Eintrag zu NgModule[declarations]

Answer 1

Sie wissen, es wäre nicht geladen ist: stellt sich heraus, zugleich eine Regression an anderer Stelle (fusioniert war Ich begann diese Funktion), die die anderen Funktionen brach.

Side Noten, die an jemanden relevant sein können:

• Meine endgültige Umsetzung implements ControlValueAccessor (statt DefaultValueAccessor)
• habe ich einen Anruf zu this.onTouched();-(blur) von der ursprünglichen verknüpften Plunker gebunden.