web-dev-qa-db-fra.com

Comment gérer plusieurs boutons de soumission dans un formulaire à l'aide de Angular JS?

J'utilise AngularJS et j'ai un formulaire où l'utilisateur peut entrer des données. À la fin du formulaire, je souhaite avoir deux boutons, un pour "enregistrer", qui enregistrera et passera à une autre page, et un autre intitulé "enregistrer et ajouter un autre" qui enregistrera le formulaire, puis le réinitialisera - lui permettant entrez une autre entrée.

Comment puis-je accomplir cela en angulaire? Je pensais pouvoir utiliser deux boutons de soumission avec des balises ng-click, mais j'utilise ng-submit sur l'élément de formulaire. Y at-il une raison pour laquelle j’ai BESOIN d’utiliser ng-submit - je ne me souviens pas pourquoi j’ai commencé à utiliser cela au lieu de ng-cliquer sur le bouton.

Le code ressemble à quelque chose comme:

<div ng-controller="SomeController">
    <form ng-submit="save(record)">
        <input type="text" name="shoppingListItem" ng-model="record.shoppingListItem">
        <button type="submit">Save</button>
        <button type="submit">Save and Add Another</button>
    </form>
</div>

Et dans le contrôleur SomeController

$scope.record = {};
$scope.save = function (record) {
    $http.post('/api/save', record).
        success(function(data) {
            // take action based off which submit button pressed
        });
}
javascriptangularjsforms
22
Jason

ngSubmit vous permet d'appuyer sur Enter tout en tapant dans la zone de texte à soumettre. Si ce comportement n'est pas important, utilisez simplement 2 ngClick. Si cela est important, vous pouvez modifier le deuxième bouton pour utiliser ngClick. Donc, votre code devient:

<div ng-controller="SomeController">
    <form ng-submit="save(record)">
        <input type="text" name="shoppingListItem" ng-model="record.shoppingListItem">
        <button type="submit">Save</button>
        <button ng-click="saveAndAdd(record)">Save and Add Another</button>
    </form>
</div>
12
Buu Nguyen

Vous pouvez conserver ng-click et type="submit". Dans le ng-click, vous pouvez simplement mettre à jour un paramètre de votre contrôleur et le valider dans l'événement ng-submit:

<div ng-controller="SomeController">
<form ng-submit="save(record)">
    <input type="text" name="shoppingListItem" ng-model="record.shoppingListItem">
    <button type="submit">Save</button>
    <button type="submit" ng-click="SaveAndAddClick=true">Save and Add Another</button>
</form>

Donc, cette approche vous évite d'ajouter une méthode et ensuite d'appeler un code redondant.

Merci

33
Kris8889

Faites-les tous les boutons et type=submit. Cela rend un peu plus propre de ne pas mélanger et faire correspondre les entrées et les boutons. En gros, vous essayez d’exécuter une méthode dans votre contrôleur pour gérer l’un ou l’autre de ces clics.

<div ng-controller="SomeController as sc">
        <form ng-submit="sc.execute(record)">
            <input type="text" name="shoppingListItem" ng-model="record.shoppingListItem">
            <button type="submit" ng-model="sc.saveButtonVal" ng-click="sc.saveButtonVal=true>Save</button>
            <button type="submit" ng-model="sc.saveAndAddButtonVal" ng-click="sc.saveAndAddButtonVal=true">Save and Add Another</button>
        </form>
</div>

Donc, dans votre fichier js, vous aurez quelque chose comme ça.

function SomeController() {
        var sc = this;

        sc.execute = function(record) {
            //initialize the vars
            sc.saveButtonVal = false;
            sc.saveAndAddButtonVal = false;

            sc.resetButtonValues = function() {
                sc.saveButtonVal = false;
                sc.saveAndAddButtonVal = false;
            };

            if (sc.saveButtonVale) {
                //do save only operation
            } else if (sc.saveAndAddButtonVal) {
                //do save and add op
            }

           // reset your button vals
           sc.resetButtonValues();
    }
}
3
ram mil

Selon moi, vous avez deux options: 1: Utilisez un événement ngClick sur le bouton "enregistrer et ajouter un autre" et supprimez la partie "type = 'submit'". Ensuite, quelle que soit la fonction que vous appelez avec ngClick, vous pouvez enregistrer puis réinitialiser les valeurs, en appelant save () dans cette fonction . 2: Supprimez ngSubmit et utilisez ngClicks pour les deux boutons. 

2
Samuel Duzett

ng-submit présente également d'autres avantages. Par exemple, un formulaire invalide ne sera pas soumis. Il est toujours préférable d'utiliser ng-submit au lieu de ng-click. Cependant, dans votre scénario, une meilleure approche serait

  1. utilisez ng-click sur les boutons. 
  2. valider le formulaire dans le contrôleur. N'oubliez pas que ng-click soumettra le formulaire même s'il n'est pas valide. 
  3. appelez deux fonctions $ scope.functions différentes sur deux ng-click différents dans le somecontroller. 

J'espère que ça aide. 

0
debugmode

Si quelqu'un recherche une approche simple, il suffit de créer un drapeau et d'alterner entre le bouton et le soumettre.

<button type="{{isButton == true ? 'button' : 'submit'}}" >Save</button>
<button type="{{!isButton == true ? 'button' : 'submit'}}" >Update</button>

Besoin de gérer l'indicateur en fonction de l'action de l'utilisateur.

0
ARJUN

Supprimez ng-submit de l'élément "form" et définissez les fonctions ng-click séparément sur chaque bouton de type "submit". Pour la vérification d'invalidation, définissez la propriété name dans la balise de l'élément de formulaire. Et vérifiez la validation dans la fonction de portée.

<div ng-controller="SomeController">
<form name="saveForm">
    <input type="text" name="shoppingListItem" ng-model="record.shoppingListItem">
    <button type="submit" ng-click="save(record)">Save</button>
    <button type="submit" ng-click="saveOther(record)">Save and Add Another</button>
</form>

Fonction Scope: 

$scope.record = {};

$scope.save = function (record) {    

if(this.saveForm.$valid)
  {

    $http.post('/api/save', record).
    success(function(data) {
        // take action based off which submit button pressed
    });
  }
}
0
Jasmin Akther Suma