forms - programa - rellenar formulario pdf online

¿Puedo activar un formulario enviado desde un controlador?

Question

Me gustaría hacer un envío de formulario tradicional desde un controlador. El escenario es que quiero acceder a una ruta en mi servidor web y redireccionar a su respuesta, lo que puedo hacer con un formulario regular en HTML, pero también quiero hacer alguna validación en sus campos cuando se presiona el botón Enviar, y si la validación falla, no quiero hacer la ruta.

Soy consciente de ng-valid, pero solo quiero que la validación tenga lugar cuando se pulsa el botón.

¿Hay alguna forma de enviar un formulario de forma condicional desde un controlador?

Answer 1

¿Intentó utilizar la directiva ng-submit en su formulario? Puede devolver verdadero / falso después de su validación.

Controlador

app.controller(''MainCtrl'', [''$location'', function($scope, $location) {
  $scope.submit = function(user) {
    var isvalid = true;
    // validation 
    if (isvalid) {
        $http.get(''api/check_something'', {}).then(function(result) {
            $location.path(result.data);
        });
        return true;
    }
    return false; //failed
  }
});

Html (no debe tener un atributo de acción)

<form name="formuser" ng-submit="submit(user)">
    <input type="text" ng-model="user.firstname" />
    <input type="text" ng-model="user.lastname" />
    <button type="submit">Submit</button>
</form>

Answer 2

¿Qué tal si desactivamos el botón Enviar hasta que el formulario sea válido?

<button type="submit" ng-disabled="form.$invalid">Submit</button>

Eche un vistazo a esta pregunta similar que tuve: validación de formulario AngularJS con directivas - "myform. $ Valid" no es lo correcto para mí

Answer 3

Ampliando desde la respuesta de @ ReklatsMasters, si quiere cambiar un valor antes de enviar el formulario , podría hacer eso ...

<form ng-form-commit action="/" name=''payForm'' method="post" target="_top">
    <input type="hidden" id="currency_code" name="currency_code" value="USD">
    <button type=''button'' ng-click=''save(''GBP'', payForm)''>buy</button>
</form>

.directive("ngFormCommit", [function(){
    return {
        require:"form",
        link: function($scope, $el, $attr, $form) {
            $form.commit = function($newCurrency) {
                $el[0].querySelector(''#currency_code'').value = $newCurrency;
                $el[0].submit();
            };
        }
    };
}])

.controller("AwesomeCtrl", ["$scope", function($scope){
   $scope.save = function($newCurrency, $form) {
     if ($form.$valid) {
         $form.commit($newCurrency);
     }
   };
}])

Answer 4

Esta no es la forma angular de hacerlo, pero puede enviar el formulario usando vainilla javascript. Por ejemplo, puede darle un id a la forma y hacer:

document.getElementById(''myForm'').submit()

o si tiene un botón de enviar puede hacer clic en él:

document.getElementById(''myForm-submit'').click()

Descubrí que el primero no guardaba los enlaces de datos (lo estaba usando en un proyecto con un widget JQuery que no tenía alternativa Angular), pero el segundo mantenía los enlaces. Supongo que esto tiene que ver con la forma en que se escribió el widget JQuery.

Puede ver más sobre activar formularios con JS vainilla aquí:

¿Cómo enviar un formulario usando javascript?

Answer 5

Puede agregar el método de envío a un FormController. Así lo hice:

<form ng-form-commit action="/" name=''payForm'' method="post" target="_top">
    <input type="hidden" name="currency_code" value="USD">
    <button type=''button'' ng-click=''save(payForm)''>buy</button>
</form>

.directive("ngFormCommit", [function(){
    return {
        require:"form",
        link: function($scope, $el, $attr, $form) {
            $form.commit = function() {
                $el[0].submit();
            };
        }
    };
}])

.controller("AwesomeCtrl", ["$scope", function($scope){
   $scope.save = function($form) {
     if ($form.$valid) {
         $form.commit();
     }
   };
}])

Answer 6

$scope.payForm.$setSubmitted();

Establece el formulario en su estado $ enviado. Esto también configurará $ submit en todos los formularios secundarios y secundarios del formulario

https://docs.angularjs.org/api/ng/type/form.FormController# $ setSubmitted