Tips & tricks,Tutorial

Formulaire dynamique avec Angularjs

25 Apr , 2015  

Logo Angularjs

Récemment, j’ai eu à créer un formulaire où l’utilisateur devait pouvoir ajouter des champs (en l’occurrence ajouter un champ contenant une question).Une fois encore la flexibilité et les possibilités d’Angularjs,rendent cette tâche si simple à coder! J’ai donc décidé de partager la façon dont j’ai procédé pour ceux qui pourraient en avoir besoin.

Pré-requis: connaissance du javascript et des bases du framework Angularjs.

La clé pour ajouter dynamiquement un champ est l’utilisation de la directive ng-repeat et son two-way binding. Le principe est de contenir le/les champs dynamiques dans un objet affiché dans le formulaire avec ng-repeat , puis à chaque click de créer un nouveau champ d’ajouter un élément à cet objet. Ainsi Angularjs ajoute automatiquement un nouveau champ avec une clé unique dans le formulaire.

Voyons un exemple.

Notre formulaire aura pour “but” pour l’utilisateur d’entrer son ou ses hobbies. AU départ notre formulaire ne contiendra qu’un champ pour rentrer les hobbies et l’utilisateur pourra en ajouter autant qu’il souhaite , avant d’envoyer sa réponse.

 

Notre fichier HTML contenant notre formulaire (nous utilisons Bootstrap pour la mise en page du formulaire)

 

Comme on le voit dans les lignes 10 à 17, les champs contenus dans formData.dynamicFields sont affichés par un ng-repeat, et à chaque ajout d’un élément dans cet objet (via la fonction addField() ) il est donc automatiquement ajouté au DOM dans le formulaire.

 

Voici ce code en action :

, , ,


2 Responses

  1. I am currently working on my application in tutored teacher evaluation project I would like if you have guidance on a said realization especially at the level of creating dynamic question. thank you

    • Nathalie Wormser dit :

      Hi,
      I am not sure I understand your question. What exactly do you want to know? Which framework are you using for your application?

Leave a Reply

Your email address will not be published. Required fields are marked *

*