14

I was trying to create a custom validator for angular-formly repeated section.

The form should be valid only if the sum of the percentage inputs is 100. So for example if repeat section has 2 fields 50 and 50 should be a valid option or 25 and 75 and so on.

While I was working on a JSbin in order to do that I found out that the repeated model is not actually updated onKeydown. Therefore iterating though all the repeat section values and calculating their sum is not possible.

I also tried with modelOptions: { updateOn: 'Keydown' } with no success. It actually makes the validator not to get called at all.

UPDATE

I came up with the following solution from the matching fields example. Unfortunately it appears that the example its self has a problem.

Play with the following JSbin and see that there are many cases where the validator gets called and returns true but the field/fields still remain red (indicating they have a problem).

Here is the JSBin.

George Nikolaides
  • 1,386
  • 12
  • 21

3 Answers3

3

Apologies since I didn't had the time to get back on this one. It has an open issue on GitHub for 2 months now. I fixed it temporary by using 7.1.2 version of angular-formly and just waiting for an update. The updated version of JSBin I have on the question should be working.

UPDATE

Since I had time and fixed this with repeat section (with a hacky way of course) I tough I should post it in case someone else is looking for this.

(note: the solution doesn't depend on formly version)

Working JSBin

George Nikolaides
  • 1,386
  • 12
  • 21
1

You made a typo while using modelOptions: { updateOn: 'Keydown' } the Keydown's k should be small case instead of uppercase, after fixing typo its working as expected. Also the ngModelOptions accept all event name in small case like keydown, keyup, blur, focus, etc.

modelOptions: { updateOn: 'keydown' }

Forked Plunkr

Pankaj Parkar
  • 134,766
  • 23
  • 234
  • 299
0

To create your own checks is best used reusable components, for example directive use-form-error.

Look at the example of 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>
Stepan Kasyanenko
  • 3,176
  • 1
  • 15
  • 23