AngularJS: C'è un modo per determinare quali campi rendono non valido un modulo?

Ho il seguente codice in un'applicazione AngularJS, all'interno di un controller, che viene chiamato da una funzione ng-submit, che appartiene a un form con nome profileForm:

$scope.updateProfile = function() {
  if($scope.profileForm.$invalid) { 
    //error handling..
  }
  //etc.
};

All'interno di questa funzione, c'è un modo per capire quali campi stanno causando l'annullamento dell'intero modulo?

Le nameinformazioni di convalida di ogni input sono esposte come proprietà in form's name in scope.

HTML

<form name="someForm" action="/">
    <input name="username" required />
    <input name="password" type="password" required />
</form>

JS

$scope.someForm.username.$valid
// > false
$scope.someForm.password.$error
// > { required: true }

Le proprietà esposte sono $pristine, $dirty, $valid, $invalid, $error.

Se vuoi scorrere gli errori per qualche motivo:

$scope.someForm.$error
// > { required: [{$name: "username", $error: true /*...*/},
//                {$name: "password", /*..*/}] }

Ogni regola in errore verrà esposta in $ error.

Ecco un plunkr con cui giocare http://plnkr.co/edit/zCircDauLfeMcMUSnYaO?p=preview

Per controllare quale campo del modulo non è valido

console.log($scope.FORM_NAME.$error.required);

questo produrrà la matrice di campi non validi del modulo

Se vuoi vedere quali campi stanno incasinando la tua validazione e hai jQuery per aiutarti, cerca semplicemente la classe "ng-invalid" sulla console javascript.

$('.ng-invalid');

Elencherà tutti gli elementi DOM che non hanno superato la convalida per qualsiasi motivo.

Puoi scorrere form.$error.pattern.

$scope.updateProfile = function() {
    var error = $scope.profileForm.$error;
    angular.forEach(error.pattern, function(field){
        if(field.$invalid){
            var fieldName = field.$name;
            ....
        }
    });
}

Quando un campo non è valido, se cerchi di ottenere il suo valore, lo sarà undefined.

Diciamo che hai un input di testo allegato $scope.mynumche è valido solo quando digiti numeri e ci hai digitato ABCsopra.

Se provi a ottenere il valore di $scope.mynum, sarebbe undefined; non restituirebbe il file ABC.

(Probabilmente sai tutto questo, ma comunque)

Quindi, utilizzerei un array che abbia tutti gli elementi che necessitano di convalida che ho aggiunto all'ambito e utilizzerei un filtro (con underscore.js ad esempio) per verificare quali restituiscono come typeof undefined.

E quelli sarebbero i campi che causano lo stato non valido.

Volevo visualizzare tutti gli errori nella descrizione comando del pulsante Salva disabilitato, in modo che l'utente sappia perché è disabilitato invece di scorrere su e giù il modulo lungo.

Nota: ricorda di aggiungere la proprietà del nome ai campi del modulo

    if (frm) {
        disable = frm.$invalid;
        if (frm.$invalid && frm.$error && frm.$error.required) {
            frm.$error.required.forEach(function (error) {
                disableArray.push(error.$name + ' is required'); 
            });
        }
    }
    if (disableArray.length > 0) {
        vm.disableMessage = disableArray.toString();
    }

Per la mia applicazione visualizzo un errore come questo:

<ul ng-repeat="errs in myForm.$error">
<li ng-repeat="err in errs">{{err.$name}}</li></ul>

se vuoi vedere tutto, solo l'utente 'err' che mostrerà qualcosa del genere:

 "$validators": {},
"$asyncValidators": {},
"$parsers": [],
"$formatters": [],
"$viewChangeListeners": [],
"$untouched": true,
"$touched": false,
"$pristine": true,
"$dirty": false,
"$valid": false,
"$invalid": true,
"$error": { "required": true },
"$name": "errorfieldName",
"$options": {}

Non così ben formattato, ma vedrai queste cose lì ...

Se vuoi trovare i campi che invalidano il modulo sull'interfaccia utente senza programmaticamente, fai clic con il pulsante destro del mouse su inspect (apri gli strumenti per sviluppatori nella vista elementi), quindi cerca ng-invalid con ctrl + f all'interno di questa scheda. Quindi per ogni campo per cui trovi la classe ng-invalid, puoi controllare se al campo non viene assegnato alcun valore mentre è richiesto, o altre regole che potrebbe violare (formato email non valido, fuori intervallo / definizione max / min, ecc.) . Questo è il modo più semplice.