AngularJS - effectuer une validation supplémentaire sur le formulaire soumettre

Question

J'ai été googling pendant un moment et n'arrive pas à trouver une bonne réponse pour mon cas spécifique. J'ai trouvé des façons de faire des validations en temps réel, mais je veux combiner cela avec des validations personnalisées après qu'un utilisateur clique sur "soumettre". Je veux permettre à l'utilisateur de cliquer sur le soumettre même s'il n'est pas valide, mais j'annulerai la soumission dans le code. Prenez le code suivant:

<form name="cashForm" id="cashForm" novalidate> 
    <input type="text" id="name" required /> // 
    <input type="number" placeholder="Tax: " required name="tax" id="tax" /> 
    <input type="number" placeholder="Tip: " required name="tip" id="tip" /> 
    <button ng-click="submission()" ng-disabled="paymentForm.$invalid">Submit</button> 
</form> 


//inside controller 
this.submission = function() { 
    //check if tip + tax is over 20 
    //prevent form and show error message if not 
    //otherwise allow default behavior 
} 

Je veux que le formulaire pour soumettre effectivement si la taxe/conseil est sur 10. Comment puis-je vérifier cela et comment empêcher la soumission du formulaire si elle ne répond pas les exigences? Aussi, est-ce que je mettrais cette logique dans le contrôleur?

Answer 1

Cela semble assez proche de ce que vous recherchez. Juste quelques choses ...

Ajouter ng-model directives à votre contrôle d'entrée pour créer deux voies données-liaisons que vous pouvez ramasser et utiliser dans votre contrôleur:

<form name="cashForm" id="cashForm" novalidate> 
    <input id="name" name="name" type="text" ng-model="nameValue" required /> 
    <input id="tax" name="tax" type="number" ng-model="taxValue" placeholder="Tax: " required /> 
    <input id="tip" name="tip" type="number" ng-model="tipValue" placeholder="Tip: " required /> 
    <button 
     ng-click="submission()" 
     ng-disabled="paymentForm.$invalid"> 
     Submit 
    </button> 

Injecter $scope dans votre contrôleur pour vous permettre de récupérer ces ng-model liaisons dans submission de votre contrôleur méthode:

function submission() { 

    $scope.errorMsg = ""; 

    if ($scope.taxValue <= 10) { 
     $scope.errorMsg = "tax not greater than 10"; 
     return; 
    } 

    if ($scope.tipValue <= 10) { 
     $scope.errorMsg = "tip not greater than 10"; 
     return; 
    } 

    // If you reached here your post-click validation passed, 
    // so continue to submit the data... 

} 

Vous pouvez alors afficher un message d'erreur en utilisant la directive ng-if avec une classe css qui met en évidence le message d'erreur:

<div ng-if="!!errorMessage" class="text-danger"> 
    {{ errorMessage }} 
</div> 

Enfin, une fois que vous avez craqué en utilisant $scope dans votre contrôleur, vous pouvez lire sur les maux perçus d'utiliser $scope et envisager à la place de passer à la syntaxe du contrôleur. Découvrez le blog de John Papa Post AngularJS's Controller As and the vm Variable