AngularJS模态对话框表单对象在控制器中未定义

2022-01-17 00:00:00 forms angularjs modal-dialog javascript

我们有一个页面，它打开一个带有如下表单的模式对话框.然而，当我们点击应该处理表单动作的控制器时，表单对象是未定义的，我是一个 Angular 新手，无法理解为什么......

We have a page that opens a modal dialog with a form like below. However when we hit the controller that should handle the form action, the form object is undefined and I am too much of an Angular newbie to understand why...

这是父页面控制器持有的打开模态对话框的功能:

This is the parent page controller holds the function to open the modal dialog:

app.controller('organisationStructureController', ['$scope', ..., '$modal', function ($scope, ..., $modal) {

    $scope.openInvitationDialog = function (targetOrganisationId) {
      $modal.open({
          templateUrl: 'send-invitation.html',
          controller: 'sendInvitationController',
          resolve: {$targetOrganisationId: function () {
            return targetOrganisationId;
          }
          }
        }
      );
    };

在这样的页面上:

// inside a loop over organisations
<a ng-click="openInvitationDialog({{organisation.id}})">Invite new member</a>

邀请对话框 html 如下所示:

the invitation-dialog html looks like this:

    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <!-- ... -->
            </div>
            <div class="modal-body">
                <form name="invitationForm">

                    <div class="form-group">
                        <label for="email" style="color:white;">Email</label>
                        <input type="email" class="form-control"  autocomplete="off" placeholder="New member email" id="email" name="email" ng-model="invitation.email" required="true"/>
                        <span class="error animated fadeIn" ng-show="invitationForm.email.$dirty && invitationForm.email.$error.required">Please enter an email address!</span>
                        <span class="error animated fadeIn" ng-show="invitationForm.email.$error.email">Invalid email</span>
                    </div>

                    <!-- ... -->

                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" ng-click="cancel()">Cancel</button>
                        <button type="submit" class="btn btn-primary" ng-click="sendInvitation()">Invite</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

应该处理邀请的控制器在其他地方:

The controller that should handle the invitation is somewhere else:

  app.controller('sendInvitationController', ['$targetOrganisationId', '$scope', ...,
    function ($targetOrganisationId, $scope, ...) {

    $scope.invitation = {
      // ...
      targetOrganisation: {
        id: $targetOrganisationId
      }
    };

    $scope.sendInvitation = function () {

      // $scope.invitationForm is undefined
      if ($scope.invitationForm.$invalid) {
        return false;
      }

      // send the invitation...

    };
  }]);

那么将表单范围放入控制器的正确方法是什么?

So what's the correct way to get the form scope into the controller?

也许我需要将 $modal 注入 sendInvitationController 并添加 sendInvitation 函数?但是当我这样做时，动作永远不会进入控制器.或者我是否必须将处理提交操作的函数添加到 $modal.open({ ... 而不是引用控制器?虽然我更喜欢将 sendInvitationController 放在它自己的文件中和范围.

Maybe I need to inject $modal into the sendInvitationController and add the sendInvitation function to it? But when I do that the action never enters the controller. Or do I have to add the function that handles the submit action to $modal.open({ ... instead of referencing the controller? Though I'd much prefer to have the sendInvitationController in its own file and scope.

感谢您的帮助！

编辑

我们发现了一些有助于我们构建解决方法并可能帮助某人回答问题本身的东西:

We found several things that helped us build a workaround and might help someone answer the question itself:

  1. $scope.invitation 对象在 sendInvitationController 中没有未定义，但保存了正确的数据，而 $scope.invitationForm 未定义.
  2. 在 send-invitation.html 中，我们可以访问 $scope.invitationForm.$invalid 并在那里进行验证:<button type="button" ng-click="sendInvitation()" ng-disabled="invitationForm.$invalid">邀请</button>
  1. the $scope.invitation object is not undefined in the sendInvitationController but holds the correct data, while $scope.invitationForm remains undefined.
  2. inside the send-invitation.html we can access $scope.invitationForm.$invalid and do the validation right there: <button type="button" ng-click="sendInvitation()" ng-disabled="invitationForm.$invalid">Invite</button>

所以问题是:为什么 invitationForm 对象到 $scope 的绑定在提交时失败，而表单模型正确绑定?

So the question is: why does the binding of the invitationForm object to the $scope fail on submit while the form model binds correcetly?

推荐答案

我有同样的问题，可以通过在模态控制器范围内定义表单对象来解决.为了让你的代码工作，例如， $scope.form = {}; 在你的控制器的开头，并将你的表单标签更改为 <form name="form.invitation">.之后应该填写$scope.form.invitation.$invalid.

I had the same issue and could solve it by defining the form object in the scope of the modals controller. To get your code working put, for example, $scope.form = {}; in the beginning of your controller and change your form tag to <form name="form.invitation">. Afterwards $scope.form.invitation.$invalid should be filled.

相关文章