forme dynamique angularjs avec différents types de champs

Question

Dans mon projet actuel, j'ai besoin de créer un formulaire dynamique en utilisant AngularJS. Je suis déjà en train de construire le formulaire suivant les idées de cette vidéo here.

Je n'arrive pas à renvoyer les données soumises à mon contrôleur. Je reçois seulement indéfini dans le journal de la console.

Actuellement, les données du formulaire sont résolues dans ui-router avant le chargement de l'état, puis copiées dans la propriété de données du contrôleur.

Contrairement à la vidéo notre formulaire nécessite que les questions sont ventilées dans les sections.

Il y a une ng-repeat sur chaque section dans les données, puis une ng-repeat imbriquée passe au-dessus de chaque question. Le type est déterminé et la directive appropriée pour le type de question/champ est chargée sur via ng-switch.

J'ai monté un petit Plunker pour l'illustrer. https://plnkr.co/edit/6dCnHiFDEYu03kfX07mr

Enfin, il y a quelques types que je ne sais pas comment gérer, comme l'adresse ou le numéro de téléphone qui sera considéré comme un type de question mais avec plusieurs champs.

(par exemple [Rue] [Ville] [Etat] [Zip])

Contrôleur

namespace portal.dashboard.form{ 
class formCtrl{ 
    formData: portal.domain.interfaces.IHousingRequest; 

    static $inject = ["formResolve"]; 
    constructor(private formResolve:any) { 

     this.formData= this.loadHousingRequestFormData; 
    } 

    public submit(isValid,data) { 
     if (isValid) { 
      console.log(data); 
     } 
    } 
} 
angular 
    .module("portal") 
    .controller("formCtrl", formCtrl); 
} 

directive pour le type d'entrée texte

namespace portal.directives { 
function inputText(): ng.IDirective { 
    return { 
     scope: { 
      model: '=' 
     }, 
     controller: function ($scope: ng.IScope) { 
      var directiveScope = $scope.$parent.$parent; 
     }, 
     controllerAs:'vm', 
     templateUrl: 'form/templates/input-text.html'    
    } 
} 

angular 
    .module("portal") 
    .directive("inputText", inputText); 
} 

type d'entrée html

<input type="text" 
     ng-model="model"/> 

HTML

<form name="form" ng-submit="vm.submit(form.$valid, data)" novalidate> 

    <!-- Section repeat --> 
    <div ng-repeat="section in vm.formData.sections track by $index"> 
     <section> 
      <div> 
       <h4> 
        {{section.name}}<br /> 
        <small ng-show="section.description">{{section.description}}</small> 
       </h4> 
      </div> 
      <section> 

       <!-- Section questions repeat --> 
       <div ng-form="formFields" ng-repeat="field in section.fields track by $index"> 
        <label> 
         {{field.name}}<br /> 
         <small>{{field.description}}</small> 
        </label> 

        <!-- input field switch --> 
        <div ng-switch="field.type"> 
         <div ng-switch-when="Text"> 
          <input-text model="data.answer[$index]"> 
          </input-text> 
         </div> 
         <div ng-switch-when="Email"> 
          <input-email model="data.answer[$index]"> 
          </input-email> 
         </div> 
        </div> 
       </div> 

      </section> 
     </section> 
    </div> 
    <div> 
     <button type="submit">Submit</button> 
    </div> 
</form> 

Answer 1

Vous avez init $scope.data = {}; avant de l'utiliser, également utiliser correctement sectionIndex et fieldIndex pour remplir la réponse:

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

 
app.controller('MainCtrl', function($scope) { 
 
    $scope.data = {}; 
 
    $scope.sections = [{ 
 
    name: 'User Info', 
 
    description: 'I\'m a description.', 
 
    fields: [{ 
 
     label: "Name", 
 
     type: "text" 
 
    }, { 
 
     label: "Email", 
 
     type: "email" 
 
    }] 
 
    }, { 
 
    name: 'Pet Info', 
 
    description: '', 
 
    fields: [{ 
 
     label: "Pet Breed", 
 
     type: "text" 
 
    }] 
 
    }]; 
 

 
    $scope.submit = function(isValid, data) { 
 
    console.log('submit fired'); 
 
    if (isValid) { 
 
     console.log(data); 
 
    } 
 
    } 
 
}); 
 

 

 
app.directive('inputText', function() { 
 
    return { 
 
    scope: { 
 
     model: '=' 
 
    }, 
 
    controller: function($scope) { 
 
     var directiveScope = $scope.$parent.$parent; 
 
    }, 
 
    controllerAs: 'vm', 
 
    template: '<input type="text" ng-model="model"/>' 
 
    } 
 

 
}); 
 

 
app.directive('inputEmail', function() { 
 
    return { 
 
    scope: { 
 
     model: '=' 
 
    }, 
 
    controller: function($scope) { 
 
     var directiveScope = $scope.$parent.$parent; 
 
    }, 
 
    controllerAs: 'vm', 
 
    template: '<input type="email" ng-model="model"/>' 
 
    } 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> 
 

 
<body ng-app="plunker" ng-controller="MainCtrl"> 
 
    <form name="form" ng-submit="submit(form.$valid, data)" novalidate> 
 

 
    <!-- Section repeat --> 
 
    <div ng-repeat="(sectionIndex, section) in sections track by $index"> 
 
     <section> 
 
      <div> 
 
       <h4> 
 
        {{section.name}}<br /> 
 
        <small ng-show="section.description">{{section.description}}</small> 
 
       </h4> 
 
      </div> 
 
      <section> 
 

 
       <!-- Section questions repeat --> 
 
       <div ng-form="formFields" ng-repeat="(fieldIndex, field) in section.fields track by $index"> 
 
        <label> 
 
         {{field.label}}<br /> 
 
        </label> 
 

 
        <!-- input field switch --> 
 
        <div ng-switch="field.type"> 
 
         <div ng-switch-when="text"> 
 
          <input-text model="data.answer[sectionIndex][fieldIndex]"> 
 
          </input-text> 
 
         </div> 
 
         <div ng-switch-when="email"> 
 
          <input-email model="data.answer[sectionIndex][fieldIndex]"> 
 
          </input-email> 
 
         </div> 
 
        </div> 
 
       </div> 
 

 
      </section> 
 
     </section> 
 
    </div> 
 
    <div> 
 
     <button type="submit">Submit</button> 
 
    </div> 
 
</form> 
 
    </body>

Aussi je ne sais pas pourquoi avez-vous besoin ce var directiveScope = $scope.$parent.$parent; dans le contrôleur de votre directive, avez-vous vraiment besoin de cela?