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はフォーム変数として使用しますが、指定しないでください。 JSでアクセスするには、

<form name="userForm"> 

のようにする必要があります。

フィールドに同じ - エラーにアクセスする場合は、 のような名前を<input type="" name="{{field.name}}" />と入力してから、 "userForm [field.name]"で検証結果にアクセスできます。

ボタンを提出するコールバックを追加します。<button type="submit" ng-disabled="userForm.$invalid" ng-click="onSubmit(userForm)"> Submit </button>