Angular 1.5 Form Validation - wie die mehr Eingaben zu validieren sind alle leer oder voll

Question

Mit einer einfachen Form:

<form name="simpleForm"> 
    <input ng-model= "profile.cat" name="cat"> 
    <input ng-model= "profile.dog" name="dog"> 
    <input ng-model= "profile.mouse" name="mouse"> 

</form> 

Was ist die einfachste Art und Weise zu überprüfen, dass alle drei Eingänge wurden leer gefüllt oder links? Mit anderen Worten, das Formular ist nur gültig, wenn alle drei Eingänge gefüllt sind oder alle drei Eingänge leer sind. Ich habe mehrere Versuche einer benutzerdefinierten Validator gemacht, die alle entlang der Linien von einer Richtlinie innerhalb eines oder mehrerer der drei Eingänge setzen, wie:

<input ng-model= "profile.cat" name="cat" all-empty-all-full > 

benutzerdefinierten Validator:

function allEmptyAllFull() { 
    return { 
    restrict: 'A', 
    require: 'ngModel', 
    link: function (scope, element, attrs, ngModel) { 
     // nothing I put in here does the job! 
    } 
    } 
} 
angular 
    .module('app') 
    .directive('allEmptyAllFull', allEmptyAllFull); 

Ich habe versucht, eine ngModel. $ validators.allEmptyAllFull-Funktion innerhalb der Link-Funktion, aber ich kann nicht auf die anderen beiden Eingänge im Inneren zugreifen. Ich habe anderen Code gesehen, bei dem Leute ein benutzerdefiniertes Attribut in die Formulareingabe "Vergleich" eingeben, aber das hat mich in diesem Fall nirgendwo hingebracht. Jede Hilfe wird sehr geschätzt.

EDIT: meine ursprüngliche Frage wurde schlecht formuliert, sorry. Ich möchte nicht, dass eine der Eingaben unabhängig benötigt wird, aber wenn jemand einen Text in einen von ihnen eingibt, müssen die anderen beiden ausgefüllt werden. Alles oder nichts.

Answer 1

gültig ermöglichen Taste auf der Füllung aller drei Eingänge senden, können Sie etwas tun.

<form name="simpleForm"> 
    <input ng-model= "profile.cat" name="cat" ng-required="simpleForm.dog.length > 0 || simpleForm.mouse.length > 0"> 
    <input ng-model= "profile.dog" name="dog" ng-required="simpleForm.cat.length > 0 || simpleForm.mouse.length > 0"> 
    <input ng-model= "profile.mouse" name="mouse" ng-required="simpleForm.cat.length > 0 || simpleForm.dog.length > 0"> 

    <button>Action</button> 
</form> 

Die Aktionstaste wird nur aktiviert, wenn alle drei Eingänge einen Wert haben.

Answer 2

Verwenden Sie die erforderliche Anweisung für Pflichtfelder.

<form name="simpleForm"> 
    <input ng-model= "profile.cat" name="cat" required> 
    <input ng-model= "profile.dog" name="dog" required> 
    <input ng-model= "profile.mouse" name="mouse" required> 
</form> 

und Sie können überprüfen, ob das Formular

<button ng-disabled="simpleForm.$invalid">Action</button>