Puis-je déclencher la soumission d'un formulaire à partir d'un contrôleur?

J'aimerais faire une forme traditionnelle de soumettre au sein d'un contrôleur. Le scénario est que je veux frapper un itinéraire sur mon serveur web et rediriger vers sa réponse, qui, je peux le faire avec une forme régulière en HTML, mais je veux aussi faire la validation de certains sur son champs lorsque le bouton envoyer est pressé, et si la validation échoue, je ne veux pas faire de la route.

Je suis conscient de ng-valide, mais je veux seulement que la validation a lieu lorsque le bouton est frappé.

Est-il un moyen pour conditionnellement ne la soumission d'un formulaire à partir d'un contrôleur?

InformationsquelleAutor Mike Pateras | 2013-04-14

Vous pouvez ajouter de la méthode de soumission à 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();
     }
   };
}])

InformationsquelleAutor ReklatsMasters

Avez-vous essayez d'utiliser la ng-soumettre la directive sur votre formulaire? Vous pouvez retourner true/false après votre validation.

Contrôleur

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

J'ai eu cette idée, mais j'avais besoin de définir une action.
C'est l'opposé de ce que l'OP demande. Cela ajoute une sorte de "hook" avant la soumission d'un formulaire html est déclenchée. OP pose des questions sur comment déclencher que la soumission d'un formulaire à partir angulaire contrôleur, pas comment ajouter un crochet à déjà en cours de soumission.

InformationsquelleAutor jpmorin

3

Ce n'est pas l'angle de chemin à faire, mais vous pouvez soumettre le formulaire à l'aide de javascript natif. Par exemple, vous pouvez donner la forme d'un identifiant et à faire:

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

ou si vous avez un bouton "soumettre", vous pouvez cliquer dessus:

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

J'ai trouvé que le premier n'a pas garder les liaisons de données (je l'utilise sur un projet avec un widget JQuery qui n'avait pas Angulaire alternative), mais le deuxième on a gardé les liaisons. Je suppose que cela a à voir avec la façon dont le widget JQuery a été écrit.

Vous pouvez en savoir plus sur le déclenchement des formes avec de la vanille JS ici:

Comment soumettre un formulaire à l'aide de javascript?
- ce ne sera pas déclencher ng-soumettre
InformationsquelleAutor Santiago Angel
0

Comment sur a tout simplement le droit de désactiver le bouton soumettre jusqu'à ce que le formulaire est valide:
```
<button type="submit" ng-disabled="form.$invalid">Submit</button>
```
Prendre un coup d'oeil à cette question que j'ai eu:
AngularJS de Validation de Formulaire avec des Directives de la "monformulaire.$valide" pas assez bon pour moi

InformationsquelleAutor Thom Porter

L'expansion à partir de @ReklatsMasters réponse, 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);
     }
   };
}])

InformationsquelleAutor Rosdi Kasim

0
```
$scope.payForm.$setSubmitted();
```
Ensembles de la forme de son $soumis état. Ce sera également mis $remis à tous les enfants et parents formes de la forme

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

InformationsquelleAutor Pankov Oleksandr

Vous devez vous connecter pour publier un commentaire.