如何在两个字段的验证上显示验证消息并使表单无效答案

【问题标题】：How to show a validationmessage on the validation of two fields and make the form invalid如何在两个字段的验证上显示验证消息并使表单无效
【发布时间】：2016-02-16 09:47:09
【问题描述】：

我想对两个字段的和进行验证，都是数字输入，但总和不能大于100。

所以我想我会创建一个 hidden input，它从我的控制器读取总数，并创建一个自定义 validationdirective 以检查该值是否为

但是输入绑定到我的控制器上的一个函数（将两个字段加在一起），所以我不能使用 ng-model。所以我以为我使用了 ng-bind，但后来我的验证指令抱怨了这一点： require: 'ngModel',，因为我没有 ng-model 了。

所以我删除了require，但随后ctrl.$validators 不再存在，这给了我一个错误......

现在我迷路了:-)

我的验证指令是这样的：

angular.module(Config.name).directive('maxvalue', function () {
    return {
        require: 'ngModel',
        link: function (scope, elm, attrs, ctrl) {
            ctrl.$validators.maxvalue = function (modelValue, viewValue) {
                //validation here

            };
        }
    };
});

你能给我一个解决这个问题的方法吗？

编辑

也许我的问题更广泛：我有更多类似的验证，其中验证不绑定到单个输入字段。我还有两个用户可以单击的按钮（有点像单选按钮，但随后用 2 个按钮实现）。我还想在没有点击按钮时显示一个跨度+使表单无效。

但我不知道如何从表单本身和控制器对表单说“你无效”。

【问题讨论】：

为什么不在两个字段上使用ngChange 方法来检查两个模型的总和是否超过 100，然后设置表单和两个字段无效（这样用户就知道出了什么问题）
如何设置表单和字段无效？你有一些代码吗？我不知道如何将表单和字段设置为无效，除了从指令中执行......

标签： angularjs validation angularjs-directive

【解决方案1】：

对于设置表单或输入有效\无效，您可以使用$setValidity。

但我建议使用特殊库use-form-error。

你可以在jsfiddle看到使用示例

angular.module('ExampleApp', ['use', 'ngMessages'])
  .controller('ExampleController', function($scope) {

  });

.errors {
  color: maroon
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-messages.min.js"></script>
<script src="https://cdn.rawgit.com/Stepan-Kasyanenko/use-form-error/master/src/use-form-error.js"></script>

<div ng-app="ExampleApp">
  <div ng-controller="ExampleController">

    <form name="myForm">
      <label>Enter your digit 1:</label>
      <input type="text" ng-model="digit1" name="myDigit1" />
      <br>
       <label>Enter your digit 2:</label>
      <input type="text" ng-model="digit2" name="myDigit3"  />

     
       <div  use-form-error="isGeaterHundred" use-error-expression="digit1*1+digit2*1>100" ng-messages="myForm.$error" class="errors">
        <div ng-message="isGeaterHundred">Your sum is greated then 100</div>
      </div>
      <input type="submit" ng-disabled="myForm.$invalid">
    </form>
    
  </div>
</div>

【讨论】：