|
|
Veröffentlicht am 30.4.2025, 16:00:55
|
|
|
|
Anforderungen: In der täglichen Frontend-Entwicklung werden Formulare häufig verwendet, um Daten durch Formulare hinzuzufügen und zu bearbeiten. Eine Instanz einer FormGroup kann eine Menge von FormControl-Instanzen verfolgen, und wenn eine FormGroup erstellt wird, kann jede Kontrolle darin nach ihrem Namen verfolgt werden. Wie kann ich eine Formularkontrolle anpassen?
Schauen wir uns zuerst die Renderings an:
Die Schritte sind wie folgt:
- Erbt die ControlValueAccessor-Schnittstelle
- Melden Sie sich bei einem NG_VALUE_ACCESSOR Anbieter an
Erbt die ControlValueAccessor-Schnittstelle
Die ControlValueAccessor-Schnittstelle definiert 4 Methoden wie folgt:
- writeValue: Jede Wertaktion, die explizit die FormControl-API aufruft, ruft die writeValue()-Methode der benutzerdefinierten Formsteuerung auf und übergibt den neuen Wert als Parameter. Was es tut, ist, den Wert der native Formularsteuerung festzulegen. Der Datenfluss stammt aus der Angular-Form -> der nativen Form (benutzerdefinierte Steuerung).
- registerOnChange: registriert das onChange-Ereignis, das bei der Initialisierung aufgerufen wird und eine Ereignisauslöserfunktion darstellt. Was ist der Nutzen dieser Ereignisauslöserfunktion? Zuerst müssen wir die Ereignisauslöserfunktion in registerOnChange speichern und sie aufrufen, wenn der richtige Zeitpunkt gekommen ist (zum Beispiel, wenn die Steuerung Benutzereingaben erhält und antworten muss). Man kann diese Funktion als "eine API verstehen, die vom Aufrufer verwendet wird, um die Kontrolle bei einer Änderung der Formulardaten in der Kontrolle zu benachrichtigen", also zur Synchronisierung der Informationen in der Steuerung. Der Parameter dieser Ereignisfunktion ist der Wert, den die Winkelform empfangen soll. Datenfluss aus der nativen Form (benutzerdefinierte Steuerung) > Angular-Form.
- registerOnTouched: Registriert das onTouched-Ereignis, eine Rückruffunktion, die ausgelöst wird, wenn ein Benutzer mit einer Steuerung interagiert. Diese Funktion wird verwendet, um die Formularkontrolle zu benachrichtigen, dass sie bereits berührt wurde, um den internen Zustand des gebundenen FormContorl zu aktualisieren. Datenfluss aus der nativen Form (benutzerdefinierte Steuerung) > Angular-Form.
- setDisabledState: Wenn sich der Formularzustand zu oder von DISABLED ändert, ruft die Form-API die setDisabledState()-Methode auf, um das entsprechende DOM-Element zu aktivieren oder zu deaktivieren. Der Datenfluss stammt aus der Angular-Form -> der nativen Form (benutzerdefinierte Steuerung).
Die Wechselwirkung ist unten dargestellt:
Tatsächlich haben native Formularsteuerungen auch Schnittstellen ähnlich wie ControlValueAccessor, zum Beispiel verwendet Angular, wenn es auf Eingabe- oder Textbereichs-DOM-native Steuerungen in Komponentenvorlagen trifft, den Befehl DefaultValueAccessor.
Accessor | Formelement | DefaultValueAccessor | Eingabe, Textbereich | CheckboxControlValueAccessor | input[type=Checkbox] | NumberValueAccessor | eingabe[type=number] | RadioControlValueAccessor | eingabe[type=radio] | RangeValueAccessor | Eingabe[Typ=Reichweite] | SelectControlValueAccessor | auswählen | SelectMultipleControlValueAccessor | select[multiple] |
Das obige ist die Angular-Formularsteuerung, die Angular für alle nativen DOM-Formelemente erstellt hat, nämlich das integrierte ControlValueAccessor.
Dokumentation:Der Hyperlink-Login ist sichtbar.
Melden Sie sich bei einem NG_VALUE_ACCESSOR Anbieter an
Nach der Implementierung der ControlValueAccessor-Schnittstelle müssen wir sie außerdem als NG_VALUE_ACCESSOR registrieren, damit die benutzerdefinierte Formularsteuerung von Angular erkannt und integriert werden kann, sonst erhält sie den Fehler "RuntimeError: NG01203: No value accessor for Form Control name: 'xxx'".
Dokumentation:Der Hyperlink-Login ist sichtbar.
kodieren
Gemäß den Schritten ist die gesamte Codierungsarbeit, der Effekt ist das erste Rendering, der Code ist wie folgt.
HTML-Seite:
TS-Code:
Referenz:
Der Hyperlink-Login ist sichtbar.
Der Hyperlink-Login ist sichtbar. |
Vorhergehend:Eine kurze Einführung in Reproducible BuildNächster:Die maximale Varchar-Länge, die SQL Server für nicht-geclusterte Indizes erzeugt
|
