угловое валидационное сообщение с динамическими значениями

Question

угловое валидационное сообщение с динамическими значениями

0

Я использую угловую форму и пытаюсь создать проверку, которая будет проверять, является ли значение от пользователя между двумя числами, которые будут установлены динамически, поэтому доза не должна быть одинаковой все время. Я использовал простой способ сделать это с помощью нескольких переменных и проверки, но сообщение пропускает переменные при возникновении ошибки.

JS Bin моей проблемы здесь

Это мой код метода проверки:

//Default values can be changed durign runtime
var rangeMin = 0;
var rangeMax = 100;
var value;

vm.fields = [
  {
    key: 'number',
    type: 'input',
    validators: {
      ipAddress: {
        expression: function(viewValue, modelValue) {
          value = modelValue || viewValue;
          var returning = false;
          if(value > rangeMin &&  value < rangeMax)
          {
            returning = true;
          }
          return returning;
        },
        message: '$viewValue + " not in range of " + rangeMin + " and " + rangeMax'
      }
    },
    templateOptions: {
      label: 'Number',
      type: 'text',
    }
  }];

Samuel Engström 26 янв. 2016, в 18:15

Источник

Теги:

javascript

html

angularjs

validation

angular-formly

2 ответа

0

В этом случае вы можете использовать директиву use-form-error, которая помогает создавать собственные проверки, например ng-required, ng-minlength или ng-pattern.

angular.module('ExampleApp', ['use', 'ngMessages'])
  .controller('ExampleController', function($scope) {
		$scope.min=1;
    $scope.max=100;
  });

.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="ExampleForm">
      <label>Range from</label>
      <input ng-model="min" required /><label>to</label>
      <input ng-model="max" required />
      <br>
      <label>Number in range</label>
      <input ng-model="num" required use-form-error="notInRange" use-error-expression="!(num*1>min*1 && num*1<max*1)" />
      <div ng-messages="ExampleForm.$error" class="errors">
        <div ng-message="notInRange">
          Number not in range of {{min}} and {{max}}
        </div>
      </div>
    </form>

  </div>
</div>

Живой пример jsfiddle.

Stepan Kasyanenko 02 фев. 2016, в 02:25

Ещё вопросы

kentcdodds · Accepted Answer · 2016-01-29T13-59-00.000Z

Проблема, с которой вы столкнулись, была в свойстве message. Это немного путается с тем, как угловой обрабатывает сообщение, но в основном значение message должно быть выражением так, как вы его видите в угловом шаблоне. Поскольку это свойство вашего сообщения было оценено так:

$viewValue + " not in range of " + rangeMin + " and " + rangeMax

И то, что было угловатым. Таким образом, угловой смог правильно оценить $viewValue потому что в поле $scope, однако rangeMin и rangeMax не находятся в поле $scope, поэтому те, которые были вычислены для пустых строк.

Таким образом, решение заключается в том, rangeMin напрямую ссылаться на rangeMin и rangeMax поэтому то, что вы передаете угловому, не должно их оценивать.

$viewValue + " not in range of 0 and 100"

Для этого ваше свойство message должно быть:

message: '$viewValue + " not in range of ' + rangeMin + ' and ' + rangeMax + '"'

Вот рабочий пример: https://jsbin.com/fupata/edit

Обратите внимание, что вы также можете предоставить rangeMin и rangeMax качестве свойств data в ваших параметрах поля, например: https://jsbin.com/baxise/edit?html,js,console,output

Это позволяет сделать вещи намного более многоразовыми, позволяя создавать собственный тип для хранения всей этой логики проверки следующим образом: https://jsbin.com/teleko/edit?html,js,output

Это последнее, что я сделал бы это :-) Удачи