Angular4 – Aucun accesseur de valeur pour le contrôle de formulaire

J’ai un petit problème avec ma forme.

J’ai fait un élément personnalisé:

{{ type.icon }} {{ type.description }}

J’essaie d’append le formControlName mais angular ne veut rien savoir et dire simplement:

 ERROR Error: No value accessor for form control with name: 'surveyType' 

J’ai essayé d’append ngDefaultControl sans succès. Il semble que c est parce qu il nya pas d entrée / sélection … mais je ne sais pas quoi faire.

Je voudrais lier mon clic à cette formeContrôle afin que, lorsque quelqu’un clique sur la carte entière, il mette mon “type” dans le formControl. C’est possible?

Vous pouvez utiliser formControlName uniquement sur les directives qui implémentent ControlValueAccessor .

Implémenter l’interface

Donc, pour faire ce que vous voulez, vous devez créer un composant qui implémente ControlValueAccessor , ce qui signifie mettre en œuvre les trois fonctions suivantes :

  • writeValue (indique à Angular comment écrire la valeur du modèle dans la vue)
  • registerOnChange (enregistre une fonction de gestionnaire appelée lorsque la vue change)
  • registerOnTouched (enregistre un gestionnaire à appeler lorsque le composant reçoit un événement tactile, utile pour savoir si le composant a été focalisé).

Enregistrer un fournisseur

Ensuite, vous devez dire à Angular que cette directive est un ControlValueAccessor (l’interface ne va pas la couper car elle est supprimée du code lorsque TypeScript est compilé en JavaScript). Vous faites cela en enregistrant un fournisseur .

Le fournisseur doit fournir NG_VALUE_ACCESSOR et utiliser une valeur existante . Vous aurez également besoin d’un forwardRef ici. Notez que NG_VALUE_ACCESSOR doit être un multi-fournisseur .

Par exemple, si votre directive personnalisée s’appelle MyControlComponent, vous devez append quelque chose dans les lignes suivantes à l’intérieur de l’object passé à @Component décorateur:

 providers: [ { provide: NG_VALUE_ACCESSOR, multi: true, useExisting: forwardRef(() => MyControlComponent), } ] 

Usage

Votre composant est prêt à être utilisé. Avec les formulaires pilotés par des modèles , la liaison ngModel fonctionnera désormais correctement.

Avec les formulaires réactifs , vous pouvez maintenant utiliser correctement formControlName et le contrôle de formulaire se comportera comme prévu.

Ressources

  • Contrôles de formulaire personnalisés dans Angular par Thoughtram
  • Contrôles de forme personnalisés angulars avec formulaires réactifs et NgMode par Cory Rylan

Je pense que vous devriez utiliser formControlName="surveyType" sur une input et non sur un div