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?
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();
}
};
}])
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>
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);
}
};
}])
$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
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