web-dev-qa-db-fra.com

Accéder au formulaire modal bootstrap angulaire à partir du contrôleur

J'essaie d'accéder au formulaire à partir du contrôleur modal ( Plunkr ) mais myForm ne semble pas être accessible. Comment obtenir un appel d'alerte au travail:

angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal, $log) {
  $scope.open = function () {
    var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: ModalInstanceCtrl          
    });       
  };
};

var ModalInstanceCtrl = function ($scope, $modalInstance) {
  $scope.submit = function() {
    // How to get this?
   alert($scope.myForm.$dirty);
  };

  $scope.ok = function () {
    $modalInstance.close();
  };

  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };
};

Et modèle:

<div ng-controller="ModalDemoCtrl">
    <script type="text/ng-template" id="myModalContent.html">
        <div class="modal-header">
            <h3>I'm a modal!</h3>
        </div>
        <div class="modal-body">
          <form name="myForm" novalidate>
          <input type="email" value="hello">
          </form>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" ng-click="submit()">OK</button>
            <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
        </div>
    </script>

    <button class="btn" ng-click="open()">Open me!</button>
    <div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>
javascriptangularjstwitter-bootstrap
17
cyberwombat

Ce était un bug connu in ui-bootstrap. _ {Donc, injecter $ modalInstance fonctionne bien maintenant.

La solution consiste à transmettre explicitement l'instance de formulaire à la fonction d'envoi:

<form name="myForm" novalidate ng-submit="submit(myForm)">
  <div class="modal-header">
    <h3>I'm a modal!</h3>
  </div>
  <div class="modal-body">
    <input type="email" value="hello">
  </div>
  <div class="modal-footer">
    <button class="btn btn-primary" type="submit">OK</button>
    <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
  </div>
</form>

var ModalInstanceCtrl = function ($scope, $modalInstance) {
  $scope.submit = function(myForm) {
   alert(myForm.$dirty);
  };
};
17
Stewie

Les modaux de l'interface utilisateur angulaire utilisent la transclusion pour attacher un contenu modal, ce qui signifie que toutes les nouvelles entrées de portée effectuées dans modal sont créées dans une portée enfant. Cela se produit avec la directive de formulaire.

Vous pouvez essayer d’attacher un formulaire à la portée parente avec (Angular 1.2.16):

<form name="$parent.userForm">

La userForm est créée et disponible dans le contrôleur du modal $scope. Grâce à l'héritage de la portée, userForm, l'accès reste inchangé dans le balisage.

<div ng-class="{'has-error': userForm.email.$invalid}"}>
18
gertas

Dans votre contrôleur, ajoutez en haut:

$scope.form = {};

Dans le modèle html:

<form name="form.yourFormName">

Validation sur les éléments HTML:

<div ng-class="{'has-error': form.yourFormName.email.$invalid}"}>

Voir également:

L'objet de formulaire de dialogue modal AngularJS n'est pas défini dans le contrôleur

2
Zymotik

Finalement, je suis allé avec la réponse donnée par gertas, mais voici une autre façon de résoudre ce problème.

//place a method on modal controller scope

        $scope.setFormReference = function (myForm) {
            $scope.myForm = myForm
        };

//call this using an angular expression in your modal template

       {{ setFormReference(loginForm)}}
0
Kildareflare