Angular-formular custom Validierung für mehrere Felder in einem Wiederholungsabschnitt

Question

Ich habe versucht, einen benutzerdefinierten Validator für eckig wiederholten Abschnitt zu erstellen.

Das Formular sollte nur dann gültig sein, wenn die Summe der prozentualen Eingaben 100 ist. Wenn also der Wiederholungsabschnitt 2 Felder hat, sollte 50 und 50 eine gültige Option sein oder 25 und 75 und so weiter.

Während ich an einer JSbin arbeitete, um das zu tun, fand ich heraus, dass das wiederholte Modell nicht tatsächlich aktualisiert wird onKeydown. Daher ist es nicht möglich, alle Werte der Wiederholungsabschnitte zu durchlaufen und ihre Summe zu berechnen.

Ich versuchte auch mit modelOptions: { updateOn: 'Keydown' } ohne Erfolg. Es macht tatsächlich den Validator, überhaupt nicht angerufen zu werden.

---

UPDATE

ich mit der folgenden Lösung aus dem entsprechenden Feld Beispiel kam. Leider scheint das Beispiel selbst ein Problem zu haben.

Spielen Sie mit dem folgenden JSbin und sehen Sie, dass es viele Fälle gibt, in denen der Validator aufgerufen wird und true zurückgibt, aber das Feld/die Felder immer noch rot bleiben (zeigt an, dass sie ein Problem haben).

Hier ist die JSBin.

Answer 1

Apologies, da ich nicht die Zeit hatte, habe wieder auf diesen einen zu bekommen. Es hat eine open issue auf GitHub für 2 Monate jetzt. Ich reparierte es vorübergehend, indem ich Version 7.1.2 der eckigen Formly und nur auf ein Update wartend verwendete. Die aktualisierte Version von JSBin, die ich auf der Frage habe, sollte funktionieren.

UPDATE

Da ich Zeit und fixierte diese mit Wiederholungsabschnitt (mit einer Hacky Art und Weise natürlich) hatte hart ich, dass ich es für den Fall, jemand schreiben sollte sonst dafür suchen.

(Anmerkung: die Lösung hängt nicht von heitlich Version)

Working JSBin

Answer 2

Sie haben einen Tippfehler während modelOptions: { updateOn: 'Keydown' } mit der Keydown ‚s ksmall case statt groß geschrieben werden sollte, nach Typo seine Arbeits wie erwartet fixiert. Nehmen Sie auch an die ngModelOptions alle Ereignisnamen in kleinen Fall wie keydown, keyup, Unschärfe, Fokus, usw.

modelOptions: { updateOn: 'keydown' } 

Forked Plunkr

Answer 3

eigene Prüfungen zu erstellen ist am besten wiederverwendbare Komponenten eingesetzt, beispielsweise Richtlinie use-form-error.

Schauen Sie sich das Beispiel jsfiddle an.

<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>