Eisen: In de dagelijkse front-end ontwikkeling worden formulieren vaak gebruikt om data toe te voegen en te bewerken via formulieren. Een instantie van een FormGroup kan een set FormControl-instanties volgen, en wanneer een FormGroup wordt aangemaakt, kan elke controle daarin worden gevolgd op basis van zijn naam. Hoe pas ik een formuliercontrole aan?
Laten we eerst naar de renderings kijken:
De stappen zijn als volgt:
- Erft de ControlValueAccessor-interface
- Registreer je bij een NG_VALUE_ACCESSOR aanbieder
Erft de ControlValueAccessor-interface
De ControlValueAccessor-interface definieert 4 methoden, als volgt:
- writeValue: Elke waardeactie die expliciet de FormControl API aanroept, roept de writeValue()-methode van de aangepaste formuliercontrole aan en geeft de nieuwe waarde door als parameter. Wat het doet is de waarde van de native formuliercontrole bepalen. De datastroom komt uit Angular vorm -> Native vorm (aangepaste controle).
- registerOnChange: registreert het onChange-event, dat bij initialisatie wordt aangeroepen en een event triggerfunctie is. Wat is het nut van deze gebeurtenistriggerfunctie? We moeten eerst de event trigger-functie opslaan in registerOnChange en deze oproepen wanneer het juiste moment is (bijvoorbeeld wanneer de besturing gebruikersinput ontvangt en moet reageren). Je kunt deze functie begrijpen als "een API die door de aanroeper wordt gebruikt om de controle te waarschuwen wanneer er een wijziging is in de formuliergegevens in de controle", dat wil zeggen, om de informatie in de controle te synchroniseren. De parameter van deze gebeurtenisfunctie is de waarde die de hoekvorm moet ontvangen. Datastroom vanuit Native vorm (aangepaste controle) - > Angular-vorm.
- registerOnTouched: Registreert het onTouched-evenement, een callback-functie die wordt geactiveerd wanneer een gebruiker met een bedieningselement interacteert. Deze functie wordt gebruikt om de formuliercontrole te informeren dat deze al is aangeraakt om de interne status van de gebonden FormContorl bij te werken. Datastroom vanuit Native vorm (aangepaste controle) - > Angular-vorm.
- setDisabledState: Wanneer de vormstatus verandert in of van DISABLED, roept de form-API de setDisabledState()-methode aan om het bijbehorende DOM-element in of uit te schakelen. De datastroom komt uit Angular vorm -> Native vorm (aangepaste controle).
De interactie wordt hieronder getoond:
Sterker nog, native vormbesturingselementen hebben ook interfaces vergelijkbaar met ControlValueAccessor; bijvoorbeeld, wanneer Angular invoer- of tekstgebied-native DOM-besturingen tegenkomt in componentsjablonen, gebruikt het het DefaultValueAccessor-commando.
Accessor | Vormelement | DefaultValueAccessor | invoer, tekstgebied | CheckboxControlValueAccessor | invoer[type=selectievakje] | NumberValueAccessor | input[type=number] | RadioControlValueAccessor | input[type=radio] | RangeValueAccessor | input[type=range] | SelectControlValueAccessor | selecteren | SelectMultipleControlValueAccessor | select[meerdere] |
Bovenstaande is de Angular-vormcontrole die Angular heeft gemaakt voor alle native DOM-vormelementen, namelijk de ingebouwde ControlValueAccessor.
Documentatie:De hyperlink-login is zichtbaar.
Registreer je bij een NG_VALUE_ACCESSOR aanbieder
Na het implementeren van de ControlValueAccessor-interface moeten we deze ook als een NG_VALUE_ACCESSOR registreren, zodat de aangepaste formuliercontrole herkend en geïntegreerd kan worden door Angular, anders krijgt het een foutmelding "RuntimeError: NG01203: No value accessor for form control name: 'xxx'".
Documentatie:De hyperlink-login is zichtbaar.
coderen
Volgens de stappen is het volledige codeerwerk, het effect is de initiële rendering, de code is als volgt.
HTML-pagina:
TS-code:
Referentie:
De hyperlink-login is zichtbaar.
De hyperlink-login is zichtbaar. |
Geplaatst op 30-4-2025 16:00:55
|
|
|
|
