javascript - dinamicas - formularios en angular 6

Angular JS no permite que preventDefault o devuelva false para que funcione en el envío de formularios

Question

Tengo un formulario que me gustaría enviar a través de AJAX:

<form class="form-inline ng-pristine" ng-submit="sendForm()" method="post" action="/sign_up" accept-charset="UTF-8">

$scope.sendForm = (e) ->
  e.preventDefault ->
  console.log ''sendForm()''
  return false  

Aparece la console.log , e inmediatamente entrega el formulario.

Ignora tanto el e.preventDefault() como el return false .

AngularJS me recuerda al tejón de miel. Simplemente no le importa.

Answer 1

Aquí hay una mejor solución de todas las otras respuestas.

Supongamos que tiene un atributo obligatorio de validación html5 adjunto a los elementos del formulario.

Ahora

<button ng-submit="Save($event)">SEND ME</button>

Y ahora tu funcionas

$scope.Save = function($event){

    $event.preventDefault();
    .
    . // may be an ajax request
    .

    return false;
}

Esto no solo activará la validación html5 sino que también evitará la redirección del envío del formulario.

Answer 2

Bueno, no lo estás haciendo de la "forma angular". Angular proporciona una directiva llamada ng-submit, que hace que prevenga un defecto por usted (siempre y cuando no tenga un atributo de acción especificado en su formulario) .

Marcado (con validación!)

<form name="myForm" ng-submit="sendForm()">
  <div>
    <input type="text" name="name" ng-model="data.name" required/>
    <span ng-show="myForm.name.$error.required && myForm.name.$dirty">required</span>
  </div>
  <div>
    <input type="email" name="email" ng-model="data.email" required/>
    <span ng-show="myForm.name.$error.required && myForm.name.$dirty">required</span>
    <span ng-show="myForm.name.$error.email && myForm.name.$dirty">invalid email</span>
  </div>
  <button type="submit" ng-disabled="myForm.$invalid">Submit</button>
</form>

Código

app.controller("MyCtrl", function($scope, $http) {
    $scope.sendForm = function (){
       $http.post(''/Submit/To/Url'', $scope.data).success(function(data) {
           alert(''done!'');
       });
    };
});

Answer 3

Otra forma de resolver esto es con unas directivas.

app.directive("submit", [function () {
    return {
        scope: {
            submit: "="
        },
        link: function (scope, element, attributes) {
            element.bind("submit", function (loadEvent) {
                return scope.submit(loadEvent);
            });
        }
    }
}]);

<form submit="sendForm" method="post" action="/sign_up">

$scope.sendForm = function(e) {
  if ($scope.whatever)
      return true;
  else
      return false;
};

Answer 4

Puede obtener el evento pasando $event a su ng-click o ng-submit. Es como inyección de dependencia, excepto en tus expresiones.

html

<form class="form-inline ng-pristine" ng-submit="sendForm($event)" method="post" action="/sign_up" accept-charset="UTF-8">

coffeescript

$scope.sendForm = (e) ->
  e.preventDefault()
  console.log ''sendForm()''
  false  

Answer 5

Sé que llego bastante tarde a la fiesta, pero en caso de que aún no lo haya resuelto, puede mantener la acción y asegurarse de que el formulario no se ng-submit realmente pasando el $event a la función ng-submit . Entonces puedes usar event.preventDefault(); en su controlador después de hacer todo su procesamiento.

Así que en tu caso sería:

<form class="form-inline ng-pristine" ng-submit="sendForm($event)" method="post" action="/sign_up" accept-charset="UTF-8">

$scope.sendForm = (e) ->
  // doing stuff
  e.preventDefault()

Espero que esto ayude.