AngularJS $の使用方法は？

Question

投稿時に、AngularJSはFormControllerに$submittedを設定し、フォームにng-submittedクラスを追加します。それは素敵だ、と私は送信ボタンを

ng-disabled="myForm.$submitted || myForm.$invalid || maybeAnotherCondition" 

を追加し、（再提出するか、呼び出しが戻る前に何かを編集するにはポイントがありませんよう）すべての入力を無効にすることができます。呼び出しが戻って最初の入力が変更されたときにサブミットボタンを押すとすぐに入力を有効にする必要があります...

私がそれを始める前に、かなりたくさんのことをしたいと思いますすでに何らかのパターンがあるのか​​、それともこのようなことをしている指示があるのか​​知っていますか？私は

3つの各機能は、上記定型の ちょうど特定のジョブと何をするだろう

FormService.manage(form, onSubmit, onSuccess, onFailure) 

のようなものを持っ想像できます。

Answer 1

すべての入力フィールドを一度に無効にする場合は、<fieldset>を使用することをおすすめします。

<form name="myForm" id="myForm" ng-submit="someHandler()"> 
    <fieldset form="myForm" ng-disabled="myForm.$submitted || myForm.$invalid || maybeAnotherCondition"> 
     <label>First Name</label> 
     <input type="text" name="firstName" data-ng-model="firstName" /> 

     <label>Last Name</label> 
     <input type="text" name="lastName" data-ng-model="lastName" /> 

     <button type="submit">Submit</button> 
    </fieldset> 
</form> 

fieldset要素を無効にすると、すべての子入力要素が無効になります。下記の実施例を参照してください。

var app = angular.module("sa", []); 
 

 
app.controller("FooController", function($scope) { 
 

 
    $scope.submitHandler = function() { 
 
    alert("Form submitted"); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.7/angular.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 

 
<div ng-app="sa" ng-controller="FooController" class="container"> 
 
    <form name="myForm" id="myForm" ng-submit="submitHandler()"> 
 
    <fieldset form="myForm" ng-disabled="myForm.$submitted"> 
 
     <div class="form-group"> 
 
     <label>First Name</label> 
 
     <input type="text" name="firstName" data-ng-model="firstName" class="form-control" /> 
 
     </div> 
 

 
     <div class="form-group"> 
 
     <label>Last Name</label> 
 
     <input type="text" name="lastName" data-ng-model="lastName" class="form-control" /> 
 
     </div> 
 

 
     <button type="submit" class="btn btn-primary"> 
 
     {{myForm.$submitted ? 'Submitted' : 'Submit'}} 
 
     </button> 
 
    </fieldset> 
 
    </form> 
 
</div>