提交时AngularJS表单错误

时间:2017-01-17 09:08:25

标签: javascript angularjs json

根据我的form.json,我有一个表格,应该有一个验证和虚假提交。

  • 首先,我应该修复错误fnPtr is not a function
  • 然后提交表单到另一个返回true或false的模拟API端点,我可以使用此https://docs.angularjs.org/api/ng/service/ $ http吗?如果有,怎么样?

所以当我提交表单时......我需要发出一个AJAX请求,它会将表单中的结果打包出来......发送到端点......我觉得该端点应该给我一些数据

Demo in Plunker

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

});

HTML

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

      <form ng-submit="userForm()" 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>

    </my-form>

1 个答案:

答案 0 :(得分:0)

  •   

    首先我应该修正这个错误:fnPtr不是函数

您应该在HTML中使用的控制器中定义userFormonSubmit函数。此外,您不应该将相同的表单名称写为ng-submit名称

plunkr demo without any function error

是的,试试这种方式

$http.post(url,data).then(function(response){
//you code
})