Comment déclencher manuellement une soumission du formulaire en AngularJS?

J'ai un formulaire que je voulais être imbriquées, mais il n'est pas possible, car le HTML ne peut pas accepter imbriqué. Est il possible que je peux appeler manuellement la soumettre(déclenche la validation, par exemple) sur la première forme sur AngularJS?

Voici comment le code ressemble à:

<div ng-conroller="ContactController">

    <form ng-submit="saveHeaderAndDetail()">
        <label for="Description">Description</label>
        <input type="text" ng-model="Description" required/> 

        <input type="text" style="visibility:hidden" />
    </form>

    <form ng-submit="addToDetail()">
    ... 
    </form>

    <input type="button" 
        ng-click="what code could trigger the first form's submit?"/>

</div>

Btw, les deux formes sont en vertu d'un contrôleur qui permet de

ng-soumettre lie 'submit' événement à un élément.. et autant que je sache, ce doit être attaché à un bouton ou input[type=submit] ou input[type=button] nœud DOM, n'est-ce pas ?

OriginalL'auteur Hao | 2012-08-05

angularjs javascript

9

Essayez de créer une directive qui attrape un événement: http://jsfiddle.net/unWF3/

Votre code sur le bouton qui n'appartient pas au formulaire déclenche l'envoi, ce qui est bon, un nouvel apprentissage pour moi, +1. Mais il ne donne pas lieu à la validation de ce formulaire. Voir ce que je voulais dire avec la validation jsfiddle.net/unWF3/6
est-il un moyen de le faire sans y compris jquery?

OriginalL'auteur
6

J'ai répondu à une question similaire ici AngularJS - Comment déclencher soumettre un formulaire imbriqué

Fondamentalement, vous pouvez déclencher la validation par des tirs de $validate événement
```
isFormValid = function($scope, ngForm) {
    $scope.$broadcast('$validate');
    if(! ngForm.$invalid) {
      return true;
}
```
De travail exemple de code & un petit utilitaire méthode qui est utile en montrant les messages de validation, voir la réponse dans le lien ci-dessus.

ne fonctionne pas si vous avez un formulaire avec ng-déposer, une <button type="submit"> et un <button type="button"> avec un manuel ng-click dans lequel vous appelez $scope.$broadcast('$validate');

OriginalL'auteur

Vous pouvez avoir des formulaires imbriqués avec ng-forme directive. Ce sera comme:

<form name="accountForm">
  <div data-ng-form="detailsForm">
    <input required name="name" data-ng-model="name">
  </div>
  <div data-ng-form="contactsForm">
    <input required name="address" data-ng-model="address">
  </div>
  <button type="submit">Save</button>
</form>

De cette façon quand submit sera déclenché pour la accountForm il valider imbriquée ng-formes aussi.

OriginalL'auteur

Il y a un moyen plus facile de le faire, Vous pouvez donner un nom pour chaque formulaire que vous avez dans votre application, vous serez en mesure d'envoyer l'ensemble de l'angulaire de l'objet de la forme que vous souhaitez déclencher ou faire ce que vous voulez avec elle. Exemple:

<div ng-conroller="ContactController">

    <form name="myFirstForm" ng-submit="saveHeaderAndDetail()">
        <label for="Description">Description</label>
        <input type="text" ng-model="Description" required/> 

        <input type="text" style="visibility:hidden" />
    </form>

    <form name="mySecondForm" ng-submit="addToDetail()">
    ... 
    </form>

    <input type="button" 
        ng-click="saveHeaderAndDetail(myFirstForm)"/>

</div>

Puis dans votre fonction

saveHeaderAndDetail (myFirstForm) {
myFirstForm.$submitted = true
...
}

OriginalL'auteur

1

On peut toujours soumettre un formulaire directement à l'aide de la soumettre
fonction () de javascript.
```
document.getElementById("myform").submit()
```
De cette façon, on peut valider le formulaire en utilisant angularjs d'abord, et si le formulaire est valide, puis de le soumettre à l'aide de la méthode d'envoi.

Ne fonctionne pas en combinaison avec ng-soumettre.

OriginalL'auteur

Vous devez vous connecter pour publier un commentaire.