Question

验证表格后，我需要提交。

我需要将表单提交给另一个模拟的API端点，该端点根据提供的答案是否正确返回true或false，并在UI中显示此响应。

是否可以实现此归档？ https://docs.angularjs.org/api/ng/service/ $ http

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 ng-if="field.type != 'radio'" 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}}" 
                     ng-model="richestClub"
                     value="{{option.value}}">{{option.label}}</br>
            </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="button" ng-click="onValidate(); return false;"> Validate</button>
      <button type="submit" ng-disabled="userForm.$invalid"> 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);
  });



  $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

这绝对是可能的。但是，您的代码有几个错误。

您使用userForm作为表单变量但不指定它。它应该像

resp.setHeader('Access-Control-Allow-Origin','*') 
resp.send(JSON.stringify(results))

以便在JS中访问它。

字段相同 - 如果您想访问他们的错误，您应该提供他们的名字与<form name="userForm">类似，然后您可以通过＆＃34; userForm [field.name]＆＃34;来访问验证结果。

添加回调以提交按钮：<input type="" name="{{field.name}}" />

AngularJS验证我的表单

1 个答案: