0

Возможно ли сохранить некоторые дополнительные данные вместе с самим флагом ошибки, используя стандартный механизм углов? Т.е. я вручную устанавливаю 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 }}Угловой валидатор, передайте данные вместе с кодом ошибки, который будет отображаться в ngMessages

+0

Разве вы не можете просто положить 'data' объект в поле, как только вы получите его? – jrsala

ответ

0

Я хотел бы передать {макс: response.max, мин: 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>

Список литературы