AngularJS驗證我的表單

Question

驗證完我的表單後，我需要提交它。

我需要將表單提交給另一個模擬API端點，根據提供的答案是否正確返回true或false，並在UI中顯示此響應。

是否可以實現這個來存檔它？ https://docs.angularjs.org/api/ng/service/ $ HTTP

Plunker Demo

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作爲表單變量，但不指定它。它應該像

<form name="userForm"> 

爲了在JS中訪問它。

相同的字段 - 如果你想訪問他們的錯誤，你應該提供他們的名字 像<input type="" name="{{field.name}}" />然後你可以通過「userForm [field.name]」來訪問驗證結果。

添加回調提交按鈕：<button type="submit" ng-disabled="userForm.$invalid" ng-click="onSubmit(userForm)"> Submit </button>