J'essaie de Soumettre le formulaire à un autre point de terminaison d'API fictif qui renvoie vrai ou faux selon que la réponse fournie est correcte. Je suis nouveau avec AngularJS, j'essaye de le comprendre petit à petit.

  • Comment puis-je afficher correctement le message requis à partir de mon fichier json?
  • Comment afficher les options de réponses et les valider?

PLUNKER

HTML :

   <my-form ng-app="CreateApp" ng-controller="mainController">

        <form ng-submit="submitForm()" novalidate>
            <fieldset>
                <div ng-repeat="field in result.fields">
                  <label for="{{field.type}}">{{field.label}}</label>
                  <input type="{{field.type}}" ngRequired="{{field.required}}">
                  <span ng-show="{{field.errorMessages}}"></span>
                </div>

                <!-- not sure how to display the answers options and validate them -->
                <input type="{{answer.type}}" name="{{answer.label}}" ngRequired="{{answer.required}}" />


            </fieldset>

            <button type="button" ng-click="onValidate(); return false;"> Validate</button>
            <button type="submit"> Submit </button>
        </form>

    </my-form>

JS:

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

myApp.controller('mainController', function($scope, $http) {
  $http.get('form.json').success(function(response) {
    $scope.result = response;
    console.log($scope.fields);
  });

  // function to submit the form after all validation has occurred
    $scope.submitForm = function() {

            // check to make sure the form is completely valid
            if ($scope.userForm.$valid) {
                alert('our form is amazing');
            }

        };

});
0
DDfrontenderLover 16 janv. 2017 à 18:08

2 réponses

Meilleure réponse

Il suffit de mettre à jour le modèle pour obtenir le résultat souhaité.

  1. Vous devez parcourir les options et imprimer une nouvelle entrée pour chacune.
  2. Vous devez utiliser un champ de nom unique pour tous les contrôles afin qu'ils puissent être ajoutés correctement au formulaire.
  3. La directive ng-show attend un booléen afin que vous puissiez convertir l'existence du message en un booléen puis, à l'intérieur de la plage, afficher le texte que vous voulez afficher lorsque l'expression est vraie.

L'intérieur ng-repeat est utilisé pour boucler sur les options et créer un nouveau jeu de champs pour chacune d'elles. s'il n'y a pas d'options disponibles, nous utilisons une liste unique qui ne contient que le champ qui nous permet d'accéder à ses informations d'étiquette et de valeur, tout comme nous le faisons pour chacune des options.

Vue:

<my-form ng-app="CreateApp" ng-controller="mainController">    
    <form ng-submit="submitForm()">
        <fieldset>
            <div ng-repeat="(key, field) in result.fields">
              <div ng-repeat="option in ((field.type && field.options) || [field])">
              <label for="{{field.type}}">{{option.label}}</label>
              <input type="{{field.type}}" name="{{key}}" ngRequired="{{field.required}} value="{{option.value}}">
              <span ng-show="{{!!field.errorMessages.required}}">{{field.errorMessages.required}}</span>
              <span ng-show="{{!!field.errorMessages.invalid}}">{{field.errorMessages.invalid}}</span>
            </div>
            </div>
        </fieldset>

        <button type="button" ng-click="onValidate(); return;"> Validate</button>
        <button type="submit"> Submit </button>
    </form>     
</my-form>

Plunker

0
Teddy Sterne 16 janv. 2017 à 16:20

Vous pouvez utiliser ngMessages pour valider le formulaire.

https://docs.angularjs.org/api/ngMessages/directive/ngMessages

0
Gabriel Berlanda 16 janv. 2017 à 16:18