web-dev-qa-db-fra.com

Puis-je déclencher l'envoi d'un formulaire à partir d'un contrôleur?

Je voudrais faire un formulaire traditionnel soumettre à partir d'un contrôleur. Le scénario est que je veux suivre une route sur mon serveur Web et rediriger sa réponse, ce que je peux faire avec un formulaire HTML classique, mais je veux aussi valider ses champs lorsque le bouton de soumission est enfoncé si la validation échoue, je ne veux pas faire la route.

Je suis conscient que ng-valide, mais je veux que la validation ait lieu lorsque le bouton est appuyé.

Existe-t-il un moyen de soumettre un formulaire de manière conditionnelle à partir d'un contrôleur?

formsangularjssubmit
32
Mike Pateras

Vous pouvez ajouter une méthode d'envoi à un FormController. Je l'ai fait:

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

Avez-vous essayé d'utiliser la directive ng-submit sur votre formulaire? Vous pouvez retourner vrai/faux après votre validation.

Manette

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 (vous ne devez pas avoir d'attribut d'action)

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

En développant à partir de la réponse de @ ReklatsMasters, si vous voulez modifier une valeur avant de soumettre le formulaire , vous pourriez faire comme si ...

<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);
     }
   };
}])
0
Rosdi Kasim
$scope.payForm.$setSubmitted();

Définit le formulaire à son état soumis. Cela va également définir $ soumis sur tous les formulaires enfants et parents du formulaire

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

0
Pankov Oleksandr

Pourquoi ne pas désactiver complètement le bouton d'envoi jusqu'à ce que le formulaire soit valide:

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

Jetez un coup d’œil à cette question similaire que j’avais: Validation de formulaire AngularJS avec directives - "mon formulaire. $ Valide" ne me convient pas du tout

0
Thom Porter