Exigences : Dans le développement front-end quotidien, les formulaires sont souvent utilisés pour ajouter et modifier des données via les formulaires. Une instance d’un FormGroup peut suivre un ensemble d’instances FormControl, et lorsqu’un FormGroup est créé, chaque contrôle peut être suivi par son nom. Comment personnaliser un contrôle de formulaire ?
Jetons d’abord un coup d’œil aux rendus :
Les étapes sont les suivantes :
- Hérite de l’interface ControlValueAccessor
- Inscrivez-vous auprès d’un prestataire NG_VALUE_ACCESSOR
Hérite de l’interface ControlValueAccessor
L’interface ControlValueAccessor définit 4 méthodes, comme suit :
- writeValue : Toute action de valeur qui appelle explicitement l’API FormControl appellera la méthode writeValue() du contrôle de formulaire personnalisé et transmettra la nouvelle valeur en paramètre. Ce que cela fait, c’est définir la valeur du contrôle de formulaire natif. Le flux de données provient de la forme angulaire -> de la forme native (contrôle personnalisé).
- registerOnChange : enregistre l’événement onChange, appelé à l’initialisation et qui est une fonction déclencheur d’événement. À quoi sert cette fonction déclencheuse d’événements ? Nous devons d’abord enregistrer la fonction déclencheur d’événements dans registerOnChange et l’appeler lorsque le moment sera venu (par exemple, lorsque le contrôle reçoit une entrée utilisateur et doit répondre). Vous pouvez comprendre cette fonction comme « une API utilisée par l’appelant pour notifier le contrôle lorsqu’il y a un changement dans les données de formulaire dans le contrôle », c’est-à-dire pour synchroniser les informations dans le contrôle. Le paramètre de cette fonction d’événement est la valeur que la forme angulaire doit recevoir. Flux de données à partir de la forme native (contrôle personnalisé) à > forme angulaire.
- registerOnTouched : Enregistre l’événement onTouched, qui est une fonction de rappel déclenchée lorsqu’un utilisateur interagit avec un contrôle. Cette fonction sert à notifier au contrôle de formulaire qu’il est déjà touché afin de mettre à jour l’état interne du FormContorl lié. Flux de données à partir de la forme native (contrôle personnalisé) à > forme angulaire.
- setDisabledState : Lorsque l’état du formulaire change de DISABLED, l’API du formulaire appelle la méthode setDisabledState() pour activer ou désactiver l’élément DOM correspondant. Le flux de données provient de la forme angulaire -> de la forme native (contrôle personnalisé).
L’interaction est présentée ci-dessous :
En fait, les contrôles de formulaire natifs disposent également d’interfaces similaires à ControlValueAccessor, par exemple, lorsqu’Angular rencontre des contrôles natifs DOM d’entrée ou de textarea dans des modèles de composants, il utilise la commande DefaultValueAccessor.
Accesseur | Élément de forme | DefaultValueAccessor | entrée, zone texte | CaseContrôleAccèsValueÀ Cocher | entrée[type=case à cocher] | Accès-ValueNuméro | entrée[type=nombre] | RadioControlValueAccessor | entrée[type=radio] | RangeValueAccessor | entrée[type=portée] | SelectControlValueAccessor | choisir | SelectMultipleControlValueAccessor | sélectionner[multiples] |
Ce qui précède correspond au contrôle de forme angulaire qu’Angular a créé pour tous les éléments natifs de forme DOM, à savoir le ControlValueAccessor intégré.
Documentation:La connexion hyperlientérée est visible.
Inscrivez-vous auprès d’un prestataire NG_VALUE_ACCESSOR
Après avoir implémenté l’interface ControlValueAccessor, nous devons également l’enregistrer comme un NG_VALUE_ACCESSOR, afin que le contrôle de formulaire personnalisé puisse être reconnu et intégré par Angular, sinon il recevra l’erreur « RuntimeError : NG01203 : No value accessor pour le nom de contrôle de formulaire : 'xxx' ».
Documentation:La connexion hyperlientérée est visible.
encoder
Selon les étapes, le travail complet de codage, l’effet est le rendu initial, le code est le suivant.
Page HTML :
Code TS :
Référence:
La connexion hyperlientérée est visible.
La connexion hyperlientérée est visible. |
Publié le 30-04-2025 à 16:00:55
|
|
|
|
