angularjs - formularios - validar formulario angular 6

Angularjs previene el envío de formularios cuando la validación de entrada falla

Question

Estoy escribiendo un formulario de inicio de sesión simple usando angularjs con alguna validación de entrada del lado del cliente para verificar que el nombre de usuario y la contraseña no estén vacíos y tengan más de tres caracteres. Vea el siguiente código:

<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>

Y el controlador:

var controller = function($scope) {

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

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

};

El problema es que se login.submit función login.submit incluso si la entrada no es válida. ¿Es posible prevenir este comportamiento?

Como nota al margen, puedo mencionar que también uso bootstrap y requirejs.

Answer 1

Aunque no es una solución directa para la pregunta de OP, si su formulario está dentro ng-app contexto ng-app , pero desea que Angular lo ignore por completo, puede hacerlo explícitamente usando la directiva ngNonBindable :

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

Answer 2

Cambie el botón de enviar a:

<button type="submit" ng-disabled="loginform.$invalid">Login</button>

Answer 3

Entonces, la respuesta sugerida de TheHippo no me funcionó, sino que terminé enviando el formulario como un parámetro a la función de esta manera:

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

Esto hace que la forma esté disponible en el método del controlador:

$scope.login = {
    submit : function(form) {
        if(form.$valid)....
    }

Answer 4

HTML:

<div class="control-group">
    <input class="btn" type="submit" value="Log in" ng-click="login.onSubmit($event)">
</div>

En tu controlador:

$scope.login = {
    onSubmit: function(event) {
        if (dataIsntValid) {
            displayErrors();
            event.preventDefault();
        }
        else {
            submitData();
        }
    }
}

Answer 5

Sé que es tarde y me respondieron, pero me gustaría compartir las cosas ordenadas que hice. Creé una directiva ng-validate que engancha el envío del formulario, luego emite prevent-default si $ eval es falso:

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

En tu html:

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

Answer 6

Sé que este es un hilo viejo, pero pensé que también haría una contribución. Mi solución es similar a la publicación ya marcada como respuesta. Algunas comprobaciones de JavaScript en línea hacen el truco.

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

Answer 7

Solo para agregar a las respuestas anteriores,

Estaba teniendo un 2 botones regulares como se muestra a continuación. (Sin tipo = "enviar" en cualquier lugar)

<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>

No importa cuánto lo intenté, al presionar Enter una vez que el formulario era válido , se llamó al botón "Clear Form", borrando todo el formulario.

Como una solución,

Tuve que agregar un botón de envío ficticio que estaba deshabilitado y oculto. Y este botón simulado tenía que estar encima de todos los otros botones como se muestra a continuación .

<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>

Bueno, mi intención nunca fue presentar en Enter, por lo que el truco anterior funciona bien.

Answer 8

Sus formularios se ponen automáticamente en $ scope como un objeto. Se puede acceder a través de $scope[formName]

A continuación se muestra un ejemplo que funcionará con su configuración original y sin tener que pasar el formulario como parámetro en ng-submit.

var controller = function($scope) {

    $scope.login = {
        submit: function() {
            if($scope.loginform.$invalid) return false;

        }
    }

};

Ejemplo de trabajo: http://plnkr.co/edit/BEWnrP?p=preview

Answer 9

Tu puedes hacer:

<form name="loginform" novalidate ng-submit="loginform.$valid && login.submit()">

No es necesario verificar el controlador.