Formulaire dynamique avec Angularjs

25 Apr , 2015

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.

var myAppModule = angular.module('myApp', [
    'myAppControllers',
  
    ]);

var myAppControllers = angular.module('myAppControllers', []);

myAppControllers.controller('formCtrl', ['$scope' ,
  function ($scope) {
    //nous commençons avec un champ hobby dans notre forumaire
   var fields = [{name:'hobby 1', val:''}];  
   //va contenir toutes les valeurs de notre formulaire
   $scope.formData = {};
   $scope.formData.dynamicFields = fields;
   $scope.SentValues;
   
   //fonction pour ajouter un champ hobby
   // nous ajoutons à notre objet formDatadynamicFields un nouvel objet
   $scope.addField=function(){
     
     var newItemNum = $scope.formData.dynamicFields.length+1;
     $scope.formData.dynamicFields.push( {name: 'Hobby '+newItemNum, val: ''});        
       
   }
   //nous récupérons les valeurs du formulaires au click 'envoyer'
   //ici nous  ne feront qu'afficher les valeurs rentrées par l'utilisateur,
   //elles pourront être par méthode POST, etc  
   $scope.sendFormValues= function(formValues){
      //the form values ready to be sent , etc
       $scope.SentValues=formValues.dynamicFields;
   }
  }]);

var myAppModule = angular.module('myApp', [

'myAppControllers',

]);

var myAppControllers = angular.module('myAppControllers', []);

myAppControllers.controller('formCtrl', ['$scope' ,

function ($scope) {

//nous commençons avec un champ hobby dans notre forumaire

var fields = [{name:'hobby 1', val:''}];

//va contenir toutes les valeurs de notre formulaire

$scope.formData = {};

$scope.formData.dynamicFields = fields;

$scope.SentValues;

//fonction pour ajouter un champ hobby

// nous ajoutons à notre objet formDatadynamicFields un nouvel objet

$scope.addField=function(){

var newItemNum = $scope.formData.dynamicFields.length+1;

$scope.formData.dynamicFields.push( {name: 'Hobby '+newItemNum, val: ''});

}

//nous récupérons les valeurs du formulaires au click 'envoyer'

//ici nous ne feront qu'afficher les valeurs rentrées par l'utilisateur,

//elles pourront être par méthode POST, etc

$scope.sendFormValues= function(formValues){

//the form values ready to be sent , etc

$scope.SentValues=formValues.dynamicFields;

}

}]);

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

 <div class="container" ng-controller="formCtrl">
    <form name="myForm" method="post">
      <div class="form-group col-sm-12">
         <label class="col-sm-3 control-label">Nom :</label>
         <div class="col-sm-9"> 
         <input type="text" class="form-control" name="formData.nom" ng-model="formData.nom" required>
         </div>
      </div>
      <h3>Vos hobbies</h3>
      <div class="form-group">
         <button ng-click="addField()" class="btn btn-info">Ajouter un hobby</button>
      </div>
      
      <div class="form-group col-sm-12" ng-repeat="formfield in formData.dynamicFields">
         <label class="col-sm-3 control-label">
             {{formfield.name}}
         </label>
         <div class="col-sm-9">
            <input type="text" class="form-control" name="formfield.val" ng-model="formfield.val">
          </div>
      </div>
     <div class="form-group">
        <div class="col-sm-offset-6 col-sm-12">
          <button class="btn  btn-primary btn-lg"  ng-click="sendFormValues(formData)">Envoyer</button>
        </div>
      </div>
    </form>
    
    <!-- pour la demo nous affichons une sortie des valeurs contenues dans nos champs hobby au submit -->
    <ul class="form-group col-sm-12" ng-repeat="formfield in SentValues.dynamicFields">
        <li>Name: {{formfield.name}}  -  Field value : {{formfield.val}}</li>
     </ul>
    </div><!-- /.container -->
  </div>

</div>

<h3>Vos hobbies</h3>

<button ng-click="addField()" class="btn btn-info">Ajouter un hobby</button>

</div>

</label>

</div>

<button class="btn btn-primary btn-lg" ng-click="sendFormValues(formData)">Envoyer</button>

</div>

</form>

<li>Name: {{formfield.name}} - Field value : {{formfield.val}}</li>

</ul>

</div>

</div>

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 :

angularjs, Formulaire, tips, tutorial

2 Responses

BIYAGA DA BIYAGA dit :

à 11 h 47 min

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

Répondre
- Nathalie Wormser dit :
  
  à 11 h 54 min
  
  Hi,
  I am not sure I understand your question. What exactly do you want to know? Which framework are you using for your application?
  
  Répondre