Angular - формально настраиваемая проверка в нескольких полях в разделе повтора

Я пытался создать специальный валидатор для angular -формально повторяющегося раздела.

Форма должна быть действительной только в том случае, если сумма процентных входов равна 100. Так, например, если в разделе повторения есть 2 поля 50 и 50, это должен быть допустимый вариант или 25 и 75 и т.д.

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

Я также пробовал с modelOptions: { updateOn: 'Keydown' } без успеха. Это фактически делает валидатор вообще не вызванным.

UPDATE

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

Играйте со следующим JSbin и увидите, что есть много случаев, когда валидатор вызывается и возвращает true, но поле/поля по-прежнему остаются красными (что указывает на наличие проблемы).

Вот JSBin.

Ответ 1

Извинения, потому что у меня не было времени, чтобы вернуться к этому. Он имеет открытую проблему на GitHub уже 2 месяца. Я исправил его временно, используя версию 7.1.2 angular -formly и просто ожидая обновления. Обновленная версия JSBin, котор я имею на вопросе должна работать.

UPDATE

Так как у меня было время и исправлено это с повторным сектором (с хакерским способом, конечно), я жестко должен опубликовать его на случай, если кто-то ищет это.

(примечание: решение не зависит от формальной версии)

Рабочий JSBin

Ответ 2

Вы сделали опечатку при использовании modelOptions: { updateOn: 'Keydown' } Keydown k должно быть small case вместо верхнего регистра, после того, как установили, что он работает как ожидалось. Кроме того, ngModelOptions принимает все имя события в маленьком регистре, например keydown, keyup, blur, focus и т.д.

modelOptions: { updateOn: 'keydown' }

Forked Plunkr

Ответ 3

Для создания собственных проверок лучше всего использовать повторно используемые компоненты, например директиву use-form-error.

Посмотрите на пример jsfiddle.

<div ng-form="testForm" use-form-error="sumNot100" use-error-expression="input_1+input_2+input_3!=100">
  <label>Sum of all input must be 100</label>
  <br>
  <label>Input 1</label>
  <input ng-model="input_1" type="number" name="input_1">
  <label>Input 2</label>
  <input ng-model="input_2" type="number" name="input_2">
  <label>Input 3</label>
  <input ng-model="input_3" type="number" name="input_3">
  <div ng-messages="testForm.$error" class="errors">
    <div ng-message="sumNot100">
      Sum of all input not equal 100
    </div>
  </div>
  <button ng-disabled="testForm.$invalid">
    Submit
  </button>
</div>