Ich versuche, die Eingabefelder mit ngControls Wert in Winkel 2 zu validieren. Ich muss überprüfen, dass der Benutzer den Wert immer in Großbuchstaben eingibt.
Jetzt müssen wir den vom Benutzer eingegebenen Wert in Großbuchstaben umwandeln. Aber ich handle Werte aus Eingabefeldern mit ngControl, nicht ngModel (in Anbetracht der Tatsache, dass ich das ngModelChange-Ereignis verwendet hätte, um den Wert in Großbuchstaben zu ändern.)
Was ist der beste und kostengünstigste Weg, den von ngControl verwendeten Wert zu konvertieren?
Wie @Eric Martinez vorgeschlagen hat, können Sie eine lokale Vorlagenvariable erstellen und die Großbuchstabe an die Eigenschaft value für das Eingabeereignis binden:
%Vor%Alternativ können Sie dies zu einer Direktive machen:
%Vor% Um die Direktive zu verwenden, geben Sie UpperCaseText in der Direktivenliste Ihrer Komponente an:
Ich würde eine benutzerdefinierte Implementierung von ControlValueAccessor erstellen. Letzteres würde einer Anweisung entsprechen, die das Eingabeereignis des Hosts abhören würde. Auf diese Weise können Sie Großbuchstaben eingeben, die der Benutzer füllt. Das Steuerelement enthält den Wert automatisch in Großbuchstaben.
Hier ist die Implementierung:
%Vor%Vergessen Sie nicht, diesen benutzerdefinierten Accessor in den Richtlinienanbietern zu registrieren. Auf diese Weise wird der benutzerdefinierte Wert-Accessor anstelle des Standard-Accessors verwendet.
%Vor%Fügen Sie die Direktive im Attribut directories der Komponente hinzu, in der Sie diesen Ansatz verwenden möchten.
Weitere Informationen finden Sie in dieser Klasse:
Dieser Link könnte zusätzliche Hinweise geben (siehe Abschnitt "NgModel-kompatible Komponente):
pixelbits hat eine großartige Lösung geliefert, aber es funktioniert nicht in der neuesten Version von Angular (v4.3.1) als Direktiven werden von der Komponente abgeschrieben. Meine Lösung basiert nur auf seiner Antwort, arbeitet aber mit den neuesten
Ich biete eine generische Lösung mit einer benutzerdefinierten Attribut-Direktive mit einer booleschen Eingabe an, die die Eingabe in Großbuchstaben umwandelt, wenn sie wahr ist.
Großbuchstabe.directive.ts:
%Vor%Hier ist die entsprechende App-Komponente mit der Vorlage.
app.ts
%Vor%Hier ist ein Plnkr , der das demonstriert.
Zumindest nach meiner Erfahrung fand ich zwei der Antworten hier aufschlussreich, aber nicht auf eigene Faust: von Thierry Templier (mit dem ersten Kommentar) und von cal .
Ich habe Teile von beiden zusammengestellt und kam auf diese Version, die jetzt mit Angular 4.1.1 in reaktiver Form arbeitet:
%Vor% Dies ist für Kleinbuchstaben, aber alles gilt auch für Großbuchstaben, benennen Sie die Direktive um, ersetzen Sie sie durch selector und transformValue .
Bearbeiten:
Ein einfaches Anwendungsbeispiel aus HTML-Code mit einer solchen Anweisung:
Hier ist meine allgemeinere Lösung, die im Grunde wie DefaultValueAccessor mit einer Text "Transformator" -Funktion hinzugefügt wird. Sie würden also
verwenden %Vor%In Ihrer Komponente haben Sie die Großbuchstabe-Funktion (Sie könnten andere Dinge neben Großbuchstaben tun, wie eine Maske implementieren) ...
%Vor%Richtlinie ...
%Vor%Tags und Links html5 angular angular2-template angular2-forms