AngularJS Form Validation demo

Question

I'm trying to Submit the form to another mocked API endpoint which returns true or false depending on whether the answer provided was correct. I'm new with AngularJS, I'm trying to get it bit by bit.

• How can I display the required message properly from my json file?
• How can I display the answers options and validate them?

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');
            }

        };

});

Answer 1

You can use ngMessages to validate the form.

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

Answer 2

Just need to make a few updates to the template to get your desired result.

1. You need to loop over the options and print out a new input for each one.
2. You need to use a unique name field for all of the controls so that they can be added to the form correctly.
3. The ng-show directive expects a boolean so you can convert the existence of the message to a boolean and then inside the span display the text you want to show when the expression is true.

The inner ng-repeat is used to loop over the options and create a new field set for each one. if there are no options available then we use a single list that only contains the field which allows us to access its label and value information just as we do for each of the options.

View:

<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>

Plunkr