AngularJS: Is er een manier om te bepalen welke velden een formulier ongeldig maken?

Ik heb de volgende code in een AngularJS-toepassing, in een controller,
die wordt aangeroepen vanuit een ng-submit-functie, die hoort bij een formulier met de naam profileForm:

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

Is er binnen deze functie een manier om erachter te komen welke velden ervoor zorgen dat het hele formulier ongeldig wordt genoemd?

Antwoord 1, autoriteit 100%

De validatie-informatie van elke invoer namewordt weergegeven als eigenschap in de naam van formin 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 }

De blootgestelde eigenschappen zijn $pristine, $dirty, $valid, $invalid, $error.

Als je de fouten om de een of andere reden wilt herhalen:

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

Elke regel die fout is, wordt weergegeven in $error.

Hier is een plunkr om mee te spelen http://plnkr.co/edit/zCircDauLfeMcMUSnYaO?p =voorbeeld

Antwoord 2, autoriteit 29%

Om te controleren welk formulierveld ongeldig is

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

dit zal de reeks ongeldige velden van het formulier uitvoeren

Antwoord 3, autoriteit 16%

Als je wilt zien welke velden je validatie in de war brengen en jQuery hebt om je te helpen, zoek dan gewoon naar de klasse “ng-invalid”op de javascript-console.

$('.ng-invalid');

Het zal alle DOM-elementen weergeven die om welke reden dan ook niet zijn gevalideerd.

Antwoord 4, autoriteit 13%

Je kunt form.$error.patterndoorlopen.

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

Antwoord 5, autoriteit 3%

Ik wilde alle fouten weergeven in de knopinfo van de uitgeschakelde knop Opslaan, zodat de gebruiker weet waarom deze is uitgeschakeld in plaats van door het lange formulier omhoog en omlaag te scrollen.

Opmerking: vergeet niet de eigenschap name toe te voegen aan de velden in uw formulier

   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();
    }

Antwoord 6, autoriteit 2%

Als een veld ongeldig is en u probeert de waarde ervan te achterhalen, is het undefined.

Stel dat je een tekstinvoer hebt gekoppeld aan $scope.mynumdie alleen geldig is als je cijfers typt, en je hebt er ABCop getypt.

Als je de waarde van $scope.mynumprobeert te krijgen, zou het undefinedzijn; het zou het ABCniet teruggeven.

(Waarschijnlijk weet je dit allemaal, maar toch)

Dus ik zou een array gebruiken met alle elementen die validatie nodig hebben die ik aan het bereik heb toegevoegd en een filter gebruiken (met bijvoorbeeld underscore.js) om te controleren welke terugkeren als typeofundefined.

En dat zouden de velden zijn die de ongeldige status veroorzaken.

Antwoord 7, autoriteit 2%

Voor mijn toepassing geef ik de fout als volgt weer:

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

als je alles wilt zien, gebruik dan gewoon ‘err’ die zoiets als dit zal weergeven:

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

Niet zo goed geformatteerd, maar je zult deze dingen daar zien…

Antwoord 8, autoriteit 2%

Als u veld(en) wilt vinden die het formulier in de gebruikersinterface ongeldig maken zonder programmatisch, klik dan met de rechtermuisknop op inspecteren (open de ontwikkelaarstools in de elementenweergave) en zoek vervolgens naar ng-invalid met ctrl+f op dit tabblad. Vervolgens kunt u voor elk veld waarvoor u een ng-ongeldige klasse vindt, controleren of het veld geen waarde krijgt terwijl het wel vereist is, of andere regels die het mogelijk overtreedt (ongeldig e-mailformaat, buiten bereik / max / min-definitie, enz.) . Dit is de gemakkelijkste manier.