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
  }

<强>更新

我明白了，但我相信你可以试试这个：

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

所以我意识到我误解了angularValidation的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.如果控制有效则返回true，反之亦然

就是这样。

如果您想访问此验证程序以显示错误消息：

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

请记住，现在如果它返回true，则输入无效。

通过子控件进行自定义验证

2 个答案: