通過子控件進行自定義驗證

Question

所以我在一個包含它自己的表單元素和按鈕的指令中工作，但是所有的控件都必須被跨越。該特定視圖的模型包含一個用於總容量的屬性，以及一個屬於隔離專區（獨立實體）的屬性。每個隔間都有自己的容量。如果/當總容量不等於所有隔間的總容量時，我已經有一個功能在視圖上顯示錯誤。這裏的問題是，因爲我所有的控件都被跨越了（我不應該修改父指令），所以我不知道如何/如何使用相同的函數將窗體標記爲無效以禁用保存按鈕。我想知道是否有解決方案（希望不涉及自定義指令或服務的解決方案），如果表達式返回true，則可以將父表單設置爲無效。

**更新**

對不起球員，我想我解釋它向後第一次。所以這將是一個很好的代表HTML中發生了什麼。 （我也沒有計算器使用這種以前好多如此忍受我）

編輯頁面指令：

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

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

查看此特定編輯：

<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

如果我理解你正確的您有類似

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

於是我意識到我曲解了customValidation片angularjs的。我認爲我必須爲驗證創建的任何指令都必須添加到表單元素本身。同樣，我認爲設置它比實際設置要困難得多。

以供將來參考：

1）創建一個指示和將其限制爲一個屬性

2.）要求ngModel爲這個指令

3。）設置你的鏈接功能：

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

4.）爲你想要驗證的控件的$ validators對象添加一個函數。在鏈接功能的內部執行此操作。例如：

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）如果控制是有效的，反之亦然

返回真就是這樣。

如果您要訪問這個驗證只顯示一條錯誤消息：

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

請記住，現在如果返回true，則輸入無效。