Question

使用标准的Angular机制，是否可以存储一些额外的数据以及错误标志本身？即我手动设置ngModel.$setValidity，我想传递一些数据和错误标志，以便在ngMessages指令中显示。例如，让我们假设场的最小/最大长度取决于一些外部因素，因此计算和计算。验证服务器端。服务器响应customlength错误代码以及max和min属性，我希望向用户显示这些属性。目前我只是设置ngModel.$setValidity("customlength", false);，但我想传递{max: response.max, min: response.min}，以便在<div ng-message="customlength">the length should be between {{ data.min }} and {{ data.max }}等模板中进行插值

Answer 1

我想传递{max：response.max，min：response.min}，在模板中进行插值，例如长度应该在{{data.min}}和{{data.max}之间}

使用根作用域存储要在消息字符串中输出的值：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-messages.js"></script>
<script>
  angular.module('ngMessagesExample',['ngMessages']);
</script>
  
<body ng-app="ngMessagesExample">
  <form name="myForm" id="{{$root.$id}}">
  <label>
    <p>Enter Min:<input type="text" ng-model="form_min">
    <p>Enter Max:<input type="text" ng-model="form_max">
    <p>Enter your name:
    <input type="text"
           name="myName"
           ng-model="name"
           ng-minlength="form_min"
           ng-maxlength="form_max"
           required />
  </label>
   <p>
   <input type="radio" required name="foo" ng-model="foo" value="1">Yes
   <input type="radio" required name="foo" ng-model="foo" value="2">No
   </p>
   <p>
   Foo: <input type="text" ng-model="myForm.foo.$modelValue">
   </p>
   <p>
   <input type="submit" value="{{myForm.foo.$error.required ? 'No' : 'Yes'}}">
   </p>
  <pre>myForm.myName.$error = {{ myForm.myName.$error | json }}</pre>

  <div ng-messages="myForm.foo.$error"   style="color:maroon" role="alert">
    <div ng-message="required">Pick one</div>
  </div>
  
  <div ng-messages="myForm.myName.$error" style="color:maroon" role="alert">
    <div ng-message="required">Your value should be between {{form_min}} and {{form_max}} characters long</div>
    <div ng-message="minlength" id="{{$id}}">Your value is less than {{form_min}}</div>
    <div ng-message="maxlength" id="{{$id}}">Your value is greater than  {{form_max}}</div>
  </div>
</form>
</body>

<强>参考

角度验证器，传递数据以及要在ngMessages中显示的错误代码

1 个答案: