子コントロールによるカスタム検証

Question

私はそれ自身のフォーム要素とボタンを含むディレクティブの中で作業していますが、すべてのコントロールを継承する必要があります。この特定のビューのモデルには、総容量のプロパティと、コンパートメントのコレクション（別のエンティティ）であるプロパティが含まれています。各コンパートメントには独自の容量があります。総容量がすべてのコンパートメントの合計容量と等しくない場合、ビューにエラーを表示する関数が既にあります。ここで問題となるのは、すべてのコントロールが継承されているため（親ディレクティブを変更するはずがない）、保存ボタンを無効にするためにフォームに無効なマークを付けるために、同じ関数を使用できるかどうかはわかりません。私は、式がtrueを返す場合、親フォームを無効に設定できるソリューション（カスタムディレクティブまたはサービスを含まないソリューション）があるかどうか疑問に思っていました。

** UPDATE **

申し訳ありませんがみんな、私は後方初めてそれを説明したと思います。これはhtmlで何が起こっているのかをよく表しています。 （また、私はそう私と一緒にクマずっとこの前stackoverflowの使用していない）

編集ページディレクティブ：

<edit-page> 
    <uib-tabset> 
     <uib-tab> 
      <!--Total Capacity input--> 
      <input type="text" numeric="{min:1, format:'#,###.#'}" ng-model-options="{updateOn: 'blur'}" class="form-control" id="tcCapacity" name="tcCapacity" data-ng-required="true" ng-model="vm.dataContext.entity.TotalCapacity" /> 
      <!--End Total Capacity--> 
     </uib-tab> 
     <uib-tab> 
      <table> 
       <tr><thead><th>...</th><th>Capacity</th><th>(Buttons for compartment add/remove)</th></thead></tr> 
       <tr ng-repeat="compartment in vm.dataContext.entity.TrailerConfigCompartments"> 
        <td width="200">{{compartment.Sequence}}</td> 
        <!--Important input under this--> 
        <td><input type="text" numeric="{min:0, format:'#,###.#'}" class="form-control" ng-model="compartment.Capacity" data-ng-required="true" /></td> 
        <!--Important input above--> 
        <td align="right" style="padding-right:30px;"> 
         <a class="btn" style="padding: .7em; color: black;" ng-click="vm.addCompartment(compartment.Sequence + 1)"> 
          <span uib-tooltip="New compartment at sequence {{compartment.Sequence + 1}}" class="btn-edit" style='margin-left:5px'><span class="glyphicon glyphicon-plus" style="margin-top:3px"></span></span> 
         </a> 
&nbsp;&nbsp; 
         <a class="btn" style="padding: .7em; color: black;" ng-click="vm.removeCompartment(compartment)"> 
          <span uib-tooltip="Remove compartment" class="btn-edit" style='margin-left:5px'><span class="glyphicon glyphicon-minus" style="margin-top:3px"></span></span> 
         </a> 
        </td> 
       </tr> 
      </table> 
     </uib-tab> 
    </uib-tabset> 
</edit-page> 

Answer 1

私はあなたを理解していれば：この特定の編集のための

<div> 
<form name="editForm"> 
<ng-transclude> 

</ng-transclude> 
<a class="btn btn-success">Save</a> 
<a class="btn btn-danger">Cancel</a> 
</form> 
</div> 

見ます正しくあなたのような何かを持っている

HTML

<div data-ng-controller="FormController as vm"> 
    <form class="foo form"> 

     <input type="text"> // some inputs 
     <input type="text"> // some inputs 

     <transcluded-directive> 

      <button class="foo button-to-disable">Do something</button> // button that should be disabled 

     </transcluded-directive> 


    </form> 
</div> 

JS

.controller("FormController", function($scope) { 

    var vm = this; 

    vm.validateTotalCapacity = function() { 
     // validation stuff 
    } 

}); 

だから私はあなたのような何かを行うことができると思います。

HTML

<div data-ng-controller="FormController as vm"> 
    <form class="foo form {{vm.validateTotalCapacity() ? '' : 'form-has-errors'}}" > 

     <input type="text"> // some inputs 
     <input type="text"> // some inputs 

     <transcluded-directive> 

      <button class="foo button-to-disable">Do something</button> // button that should be disabled 

     </transcluded-directive> 


    </form> 
</div> 

見て、私は<form class="foo form">でフォームのバリデータを入れて、エラークラス

のための条件を作成しますCSS

.form-has-errors .button-to-disable { 
     pointer-events: none; 
     cursor: default; 
     opacity: 0.5 
     // or your custom disabled styles 
    } 

UPDATE

私は見たが、私はあなたがこれを試みることができると信じて：

HTML

<div> 
     <form name="editForm" class="{{editForm.$valid ? '' : 'form-has-errors '}}"> 
      <ng-transclude> 

      </ng-transclude> 
      <a class="btn btn-success">Save</a> 
      <a class="btn btn-danger">Cancel</a> 
     </form> 
    </div> 

Answer 2

は、だから、私はangularjsのcustomValidationピースを誤解していたが実現。検証のために作成しなければならない指示は、フォーム要素自体に追加する必要があると思いました。ちょうどよく私はそれが実際よりもセットアップするのがずっと難しいと思った。今後の参考のために

：

1）ディレクティブを作成し、属性

2に、それを制限する）は、このディレクティブ

3用ngModelが必要になります。あなたが検証したいコントロールの$バリデータオブジェクトに機能を追加

link: function(scope, elem, attrs, ngModel) {....} 

4）：）あなたのリンク機能を設定します。リンク機能のINSIDEを実行します。例：コントロールが有効であり、その逆

そして、それはそれだ場合

link: function(scope, elem, attrs, ngModel) { 
    ngModel.$validators.validationFn = function(value) { 
     //Where value is the current value of the control 

     //In my case, where I want to compare value to the combined value of other 
     //compartments I would send in whatever data I wanted via the scope property of 
     //this directive and compare the two in this function 
    } 
} 

5）がtrueを返します。

あなただけのエラーメッセージを表示するには、このバリデータにアクセスする場合：

ng-show="vm.arbitraryInput.$error.validationFn" 

それがtrueを返した場合、今、その後、入力が無効であることに留意してください。