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.