web-dev-qa-db-fra.com

différences entre ng-submit et ng-click

Dans angularjs, je me demande quelles sont les différences entre ng-submit et ng-click? Plus précisément, les avantages et les inconvénients de chacun et quand devriez-vous l'un ou l'autre? Merci!
** MODIFIER **
J'ai examiné cela un peu plus, mais je me demande toujours (le cas échéant) quel est l'avantage d'utiliser ng-submit? Pourriez-vous utiliser un ng-clic à la place de tous les ng-soumissions? Cela causerait-il des problèmes? Merci encore!

angularjssubmitform-submitangularjs-ng-click
38
MrMadsen

La directive ngSubmit se lie à événement de soumission dans le navigateur, qui est déclenché lorsqu'un formulaire est soumis.

De MDN:

Notez que la soumission n'est déclenchée que sur l'élément de formulaire, pas sur le bouton ou la soumission. (Les formulaires sont soumis, pas les boutons.)

Vous pouvez donc l'utiliser pour soumettre un formulaire d'inscription d'utilisateur, ou quelque chose comme ça.

D'un autre côté, la directive ngClick peut s'appliquer à tout type d'élément.

De source :

La directive ngClick vous permet de spécifier un comportement personnalisé lorsqu'un élément est cliqué.

Utilisez-le pour permettre à votre utilisateur d'interagir avec votre page d'une manière autre que l'envoi d'un formulaire. Peut-être pour cliquer sur un bouton de téléavertisseur "précédent" ou "suivant", ou peut-être une carte ou quelque chose.

39
ANDREW MAGILL

Angular empêche l'action par défaut (soumission du formulaire au serveur) à moins que l'élément n'ait action, action-données ou action-x les attributs spécifiés. Ainsi, lorsque vous utilisez angular avec des formulaires sans ces attributs ng-click et ng-submit peut être utilisé pour spécifier la méthode javascript à appeler. Dans l'un ou l'autre appel, vous pouvez obtenir toutes les valeurs d'entrée dans une portée en raison de la propriété de liaison de données bidirectionnelle angulaire. Pourriez-vous utiliser un clic ng à la place de tous les soumissions ng ? Est-ce que cela causerait des problèmes?
il peut être utilisé mais lors de l'utilisation de ng-click, il ne prend pas en compte les attributs d'entrée html (comme requis, min-max, maxlength) et exécute immédiatement le corps de la méthode.

24
MstfAsan

Ma raison préférée d'utiliser ng-submit c'est qu'il vous permet d'appuyer sur <Enter> clé tout en se concentrant sur une entrée de formulaire, etc. et le formulaire sera soumis. (En supposant bien sûr que vous avez un bouton de type="submit" sous la forme.)

Son clavier est plus convivial et plus accessible que d'avoir ng-click sur un bouton, car avec ng-submit, un utilisateur peut cliquer sur le bouton soumettre ou appuyer sur <Enter>.

16
Aaron Gray

Si nous voulons que le formulaire ne soit pas soumis lorsqu'il n'est pas valide, alors au lieu de ng-cliquer sur le bouton, nous utiliserons la directive ng-submit sur le formulaire lui-même

    <div class="row">
        <form name="adduser" ng-submit="AddUser(adduser.$valid)">                   
            <div id="name-group" class="form-group-lg">
                <input type="text"
                       required
                       name="name"
                       ng-model="userfullName"
                       class="form-control"
                       placeholder="Full Name">
            </div>

Dans le ng-submit, nous appelons une fonction AddUser du contrôleur avec un paramètre nom de formulaire. $ Valid. Cette fonction d'envoi ne sera appelée que lorsque le formulaire est valide ou en d'autres termes, toutes les entrées utilisateur du formulaire sont valides. Gardez à l'esprit que dans ce cas, le ne sera pas soumis si le formulaire n'est pas valide

Lorsque nous utilisons ng-click, le formulaire sera envoyé même s'il n'est pas valide. Deux observations pour ng-click sont les suivantes:

Nous avons pu soumettre le formulaire même si le formulaire n'était pas valide Pour les entrées non valides, la valeur a été définie sur non défini dans le contrôleur

4
debugmode

ng-submit associé aux formulaires, cet événement se déclenche lorsque vous soumettez le formulaire. Où comme ng-click peut fonctionner sans formulaire soumettre un événement

3
niran