Angularjs empêche la soumission du formulaire lorsque la validation des entrées échoue

Question

J'écris un formulaire de connexion simple en utilisant angularjs avec une validation des entrées côté client pour vérifier que le nom d'utilisateur et le mot de passe ne sont pas vides et ont plus de trois caractères. Voir le code ci-dessous :

<form name="loginform" novalidate ng-submit="login.submit()" class="css-form">
    <fieldset>

        <div class="control-group input-prepend">
            <span class="add-on"><i class="icon-user"></i></span>
            <input type="text" ng-model="login.username" name="username" required ng-minlength="3" placeholder="username" />
        </div>

        <div class="control-group input-prepend">
            <span class="add-on"><i class="icon-lock"></i></span>
            <input type="password" ng-model="login.password" name="password" required ng-minlength="3" placeholder="" />
        </div>

        <div class="control-group">
            <input class="btn" type="submit" value="Log in">
        </div>

    </fieldset>
</form>

Et le contrôleur :

var controller = function($scope) {

    $scope.login = {
        submit: function() {

            Console.info($scope.login.username + ' ' + $scope.login.password);
        }
    }

};

Le problème est que le login.submit sera appelée même si l'entrée n'est pas valide. Est-il possible d'empêcher ce comportement ?

En passant, je peux mentionner que j'utilise également bootstrap et requirejs.

Answer 1

Bien qu'il ne s'agisse pas d'une solution directe à la question du PO, si votre formulaire se trouve à l'intérieur d'un fichier ng-app mais que vous voulez qu'Angular l'ignore complètement, vous pouvez le faire explicitement en utilisant l'option ngNonBindable directive :

<form ng-non-bindable>
  ...
</form>

Answer 2

Juste pour ajouter aux réponses ci-dessus,

J'avais 2 boutons réguliers comme indiqué ci-dessous. (Pas de type="submit "nulle part)

<button ng-click="clearAll();" class="btn btn-default">Clear Form</button>
<button ng-disabled="form.$invalid" ng-click="submit();"class="btn btn-primary pull-right">Submit</button>

Peu importe à quel point j'ai essayé, appuyer sur la touche Entrée une fois que le formulaire était valide le bouton "Effacer le formulaire" a été appelé, effaçant tout le formulaire.

Comme solution de rechange,

J'ai dû ajouter un bouton d'envoi factice qui était désactivé et caché. Et ce bouton factice devait se trouver au-dessus de tous les autres boutons, comme indiqué ci-dessous. .

<button type="submit" ng-hide="true" ng-disabled="true">Dummy</button>

<button ng-click="clearAll();" class="btn btn-default">Clear Form</button>

<button ng-disabled="form.$invalid" ng-click="submit();"class="btn btn-primary pull-right">Submit</button>

Eh bien, mon intention n'a jamais été de soumettre sur Enter, donc le hack donné ci-dessus fonctionne bien.

Answer 3

Je sais qu'il s'agit d'un vieux fil de discussion mais j'ai pensé apporter ma contribution. Ma solution étant similaire au post déjà marqué comme une réponse. Quelques vérifications JavaScript en ligne font l'affaire.

ng-click="form.$invalid ? alert('Please correct the form') : saveTask(task)"

Answer 4

Je sais qu'il est tard et qu'on a déjà répondu à ma question, mais j'aimerais partager les trucs sympas que j'ai faits. J'ai créé une directive ng-validate qui s'accroche au onsubmit du formulaire, puis elle émet un prevent-default si le $eval est faux :

app.directive('ngValidate', function() {
  return function(scope, element, attrs) {
    if (!element.is('form'))
        throw new Error("ng-validate must be set on a form elment!");

    element.bind("submit", function(event) {
        if (!scope.$eval(attrs.ngValidate, {'$event': event}))
            event.preventDefault();
        if (!scope.$$phase)
            scope.$digest();            
    });
  };
});

Dans votre html :

<form name="offering" method="post" action="offer" ng-validate="<boolean expression">