web-dev-qa-db-fra.com

AngularJS - Comment déclencher l'envoi sous forme imbriquée

Je construis un formulaire qui génère une invitation lors de sa soumission. L'invitation comporte plusieurs champs, dont l'un est une adresse e-mail saisie avec un bouton "Ajouter". Lorsque vous cliquez dessus, vous devez ajouter cette adresse à une liste d'adresses e-mail devant recevoir l'invitation.

Cela peut être fait avec un seul formulaire. Toutefois, si l'utilisateur appuie sur la touche Entrée tout en tapant un courrier électronique, il déclenche submit sur tout le formulaire. J'aimerais que le résultat de la touche Entrée - lorsque le champ de saisie de l'e-mail est activé - ait le même effet que si vous cliquez sur le bouton "Ajouter". Je m'attendais à ce que la bonne façon de résoudre ce problème consiste à imbriquer un formulaire de saisie de courrier électronique dans le formulaire d'invitation, comme suit:

    <ng-form ng-submit="sendInvite()">
        <input type="text" placeholder="Title" ng-model="invitation.title"/>

        <ng-form ng-submit="addInvitee()">
            <input type="email" placeholder="Title" ng-model="inviteeEmail"/>
            <button class="btn" type="submit">add</button>
        </ng-form>

        <button class="btn" type="submit">Send</button>
    </ng-form>

Avec le javascript suivant dans le contrôleur:

    $scope.addInvitee = function() {
        $scope.invitation.emails.Push($scope.inviteeEmail);
        $scope.inviteeEmail = '';
    }

    $scope.sendInvite = function() {
        //code to send out the invitation
    }

Mon problème est que, après avoir imbriqué les formulaires (et converti ainsi de <form> à <ng-form>, la soumission de l'un ou l'autre ne fonctionne plus.

Plunker ici

formsangularjs
19
Jamie A

J'ai des exigences similaires - formulaire en plusieurs étapes piloté par un assistant. Lorsque l'utilisateur clique sur le bouton "Suivant", je dois valider le formulaire de l'étape en cours.

Nous pouvons déclencher la validation en déclenchant l'événement '$validate' sur la variable scope liée au formulaire.

isFormValid = function($scope, ngForm) {
    $scope.$broadcast('$validate');
    if(! ngForm.$invalid) {
      return true;
    }
}

Chaque fois que je veux vérifier si les valeurs du formulaire sont correctes, j'appelle isFormValid avec l'instance de scope & form.

Code de travail: Lien Plunker

Il est également utile d’avoir peu de logique supplémentaire dans isFormValid (inclus dans le Plunker ci-dessus) qui crée le formulaire & les champs $dirty car nous afficherions/cacherions les messages de validation en fonction de leur état $dirty.

8
manikanta

Vous pouvez utiliser l'une des deux méthodes suivantes pour spécifier quelle méthode javascript doit être appelée lors de la soumission d'un formulaire:
* ngSubmit directive sur l'élément de formulaire
* Directive ngClick sur le premier bouton ou champ de saisie du type submit (input [type = submit])
- formulaire docs

<ng-form>
   <input type="text" placeholder="Title" ng-model="invitation.title"><br>
   <ng-form>
     <input type="email" placeholder="Title" ng-model="inviteeEmail">
     <button class="btn" ng-click="addInvitee()">add</button><br>
   </ng-form>
   <ul class="unstyled">
     <li ng-repeat="invitee in invitation.invitees">
        <span>{{invitee.email}}</span>
     </li>
   </ul>
   <button class="btn" ng-click="sendInvite()">Send</button>
</ng-form>

Plunker

8
Mark Rajcok

Lorsque le formulaire est soumis, vous pouvez trouver tous les formulaires imbriqués en utilisant quelque chose comme ci-dessous

forms = []
forms.Push(form)
nestedForms = _.filter(_.values(form), (input) -> (input instanceof form.constructor) and (input not in forms))

Ici, forme est le contrôleur de formulaire externe qui a été soumis. Vous pouvez accrocher ce code sur votre commande, trouver tous les formulaires imbriqués et faire ce que vous devez faire. 

Note: Ceci est coffeescript

0
Sudhir N