Question

我有一个表格应该正确显示验证信息，但目前验证是整个地方。

在提交时，我应该能够相应地显示消息。
提交时，我应该从我的函数回复。
单选按钮无法选择

请看我的演示和我的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

我将列出一些可以使用表单快速修复的内容，然后将您指向更有角度的方向进行验证：

您需要JSON中的name属性，例如"name": "Email"。这就是您的单选按钮允许多个选中的原因，因为单选按钮按名称分组。此外，Angular的验证方法使用name属性来标识每个字段，您可以在链接的教程中看到。
表单提交的ng-click功能不是必需的，使用ng-form并按下按键类型submit，然后将功能分配给ng-form按下按钮时将运行。
要进行任何角度验证，每个输入都需要ng-model
通过验证本身，您正在尝试将HTML5验证与Angular混合使用，这可以起作用，但这不是最好的方法。要查看验证表单的Angular方法，请检查this tutorial，这有望指向正确的方向。

我对demo进行了一些修改，但它仍然没有进行有效的验证，但希望我给你的信息可以让你朝着正确的方向。

Answer 2

我建议您使用 ngMessages 。如果您想将其实现为表单，则Here是一个教程。

使用ngMessage，您无需输入太多代码来验证

This tutorial适用于离子框架，但与您的代码完美配合。

<强>干杯！

AngularJS正确显示验证消息

2 个答案: