Question

我在尝试验证此表单时遇到了一些问题，json有一些错误消息，我可以让它正常工作。

所以如何才能正确显示消息？

请看我的演示和我的json。 Plunker Demo

HTML：

<form ng-submit="userFormMethod()" name="userForm" novalidate>
  <fieldset>
    <div ng-repeat="field in result.fields">
      <label for="{{field.type}}">{{field.label}}</label>

      <input ng-if="field.type != 'radio'"
             name="{{field.name}}"
             ng-required="{{field.required}}"
             value="{{options.value}}" 
             type="{{field.type}}" />

      <div ng-if="field.type == 'radio'">
        <div ng-repeat="option in field.options">

          <input type="{{field.type}}"
                 name="{{field.name}}"
                 ng-required="{{field.required}}"
                 ng-model="richestClub"
                 value="{{option.value}}" />{{option.label}}
        </div>
      </div>

      <form-error ng-show="{{!!field.errorMessages.required}}">{{field.errorMessages.required}}</form-error>
      <form-error ng-show="{{!!field.errorMessages.invalid}}">{{field.errorMessages.invalid}}</form-error>
    </div>
  </fieldset>

 <button type="submit"
         ng-disabled="userForm.$invalid"
         ng-click="onSubmit(userForm)"> Submit </button>
</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);
  });


$scope.userForm = function (user) {
    $http({
        method: 'POST',
        url: 'https://mytestserver.com/that/does/not/exists',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        transformRequest: function (data) {
            var postData = [];
            for (var prop in data)
            postData.push(encodeURIComponent(prop) + "=" + encodeURIComponent(data[prop]));
            return postData.join("&");
        },
        data: user
    });
}


  $http.get('form.json').success(function(response) {
    $scope.result = response;
    var fields = response.fields;
    $scope.richestClub = fields.answer.options[0].value;
    console.log($scope.richestClub);
    console.log($scope.fields);
  });

});

Answer 1

显然，对于动态元素验证，至少需要Angular 1.4.3，如本issue中所述。

如果你无法升级你的角度版本，仍然有一个解决方案，而不是最好的，但正在工作：Plunker corrected

<form id="outerForm" name="outerForm">
  <div x-ng-repeat="field in result.fields">
    <ng-form x-ng-submit="userFormMethod(userForm.$valid)" name="innerForm" novalidate>
      <fieldset>
         <label for="{{field.type}}">{{field.label}}</label>

         <input x-ng-if="field.type != 'radio'"
                x-ng-model="field.model"
                name="{{field.name}}"
                x-ng-required="{{field.required}}"
                value="{{options.value}}" 
                type="{{field.type}}" />

         <div x-ng-if="field.type == 'radio'">
           <div x-ng-repeat="option in field.options">                  
             <input type="{{field.type}}"
                    name="{{field.name}}"
                    x-ng-required="{{field.required}}"
                    x-ng-model="richestClub"
                    value="{{option.value}}" />{{option.label}}
           </div>
         </div>

         <form-error x-ng-show="innerForm['\{\{field.name\}\}'].$error.required">{{field.errorMessages.required}}</form-error>
         <form-error x-ng-show="innerForm['\{\{field.name\}\}'].$invalid">{{field.errorMessages.invalid}}</form-error>
      </fieldset>
    </ng-form>
  </div>
  <button type="submit" 
          x-ng-disabled="outerForm.$invalid"> Submit </button>
</form>

演示代码中缺少元素：

周围的形式“outerForm”
使用表单['{{field.name}}']
A ng-model
Typo错误检测html错误

PS：我没有编辑风格，我相信你可以自己做;）

编辑：使用Angular 1.6，更容易;）Plunker：

<form x-ng-submit="userFormMethod(userForm.$valid)" name="innerForm" novalidate>
  <div x-ng-repeat="field in result.data.fields">
    <fieldset>
      <label for="{{field.type}}">{{field.label}}</label>
      <input x-ng-if="field.type != 'radio'"
             x-ng-model="field.model"
             name="{{field.name}}"
             x-ng-required="{{field.required}}"
             value="{{options.value}}" 
             type="{{field.type}}" />

      <div x-ng-if="field.type == 'radio'">
        <div x-ng-repeat="option in field.options">
          <input type="{{field.type}}"
                 name="{{field.name}}"
                 x-ng-required="{{field.required}}"
                 x-ng-model="richestClub"
                 value="{{option.value}}" />{{option.label}}
        </div>
      </div>

      <form-error x-ng-show="innerForm[field.name].$error.required">{{field.errorMessages.required}}</form-error>
      <form-error x-ng-show="innerForm[field.name].$invalid">{{field.errorMessages.invalid}}</form-error>
    </fieldset>
  </div>
  <button type="submit" 
          x-ng-disabled="innerForm.$invalid"> Submit </button>
</form>

PS：js需要一些更新，请在plunker上检查。

Answer 2

我对你的插件做了一些修改并创建了一个新的，检查一次。

进行更改后的表格。

 <form ng-submit="userFormMethod(userForm.$valid)" name="userForm" novalidate>
          <fieldset>
            <div ng-repeat="field in result.fields">
              <label for="{{field.type}}">{{field.label}}</label>

              <input ng-if="field.type != 'radio'"
                     name="{{field.name}}"
                     ng-required="{{field.required}}"
                     type="{{field.type}}" 
                     ng-model="input"/>


              <div ng-if="field.type == 'radio'">
                <div ng-repeat="option in field.options">

                  <input type="{{field.type}}"
                         name="{{field.name}}"
                         ng-required="test == ''"
                         ng-model="testa"
                          />{{option.label}}

                </div>
              </div>


            </div>
            <form-error ng-show="userForm.$invalid">Please fill the required fields.</form-error>
              <form-error ng-show="!field.errorMessages.invalid">{{field.errorMessages.invalid}}</form-error>
          </fieldset>

         <button type="submit" 
                ng-disabled="userForm.$invalid"> Submit </button>

        </form>

Here is a Demo of the plunk

提交时的AngularJS验证消息

2 个答案: