AngularJs表单验证ui-bootstrap模式

时间：2021-09-28 11:53:03

I'm trying to use a form with validation into a ui-bootstrap modal and the modal as a cancel button that just dismisses the view when clicked. The cancel is not working if there is validation errors. if I click again on the button then the modal closes. What am I possibly doing wrong? http://plnkr.co/edit/loFUvJRfuycxd3qQwMgM?p=preview

我正在尝试将带有验证的表单用于ui-bootstrap模式,将模态用作取消按钮,只需在单击时解除视图。如果存在验证错误,则取消无效。如果我再次点击按钮,则模态关闭。我可能做错了什么? http://plnkr.co/edit/loFUvJRfuycxd3qQwMgM?p=preview

angular.module('myApp', ['ui.bootstrap']);
angular.module('myApp').controller('TestCTRL', function ($scope,modalService) {
	$scope.login = function () {

	        var modalOptions = {
	            closeButtonText: 'Cancel',
	            submitForm : function(form) {
	            	if(form.$valid) {
				        console.log('Loggin in');
				      }
	            }
	        };

	        modalService.showModal({}, modalOptions).then(function (result) {
	            console.log('completed');
	        });
	    };
});

angular.module('myApp').service('modalService', function ($modal) {

        var modalDefaults = {
            backdrop: true,
            keyboard: true,
            modalFade: true,
            templateUrl: 'login.html'
        };

        var modalOptions = {
            closeButtonText: 'Close',
            actionButtonText: 'OK',
            headerText: 'Proceed?',
            bodyText: 'Perform this action?'
        };

        this.showModal = function (customModalDefaults, customModalOptions) {
            if (!customModalDefaults) customModalDefaults = {};
            customModalDefaults.backdrop = 'static';
            return this.show(customModalDefaults, customModalOptions);
        };

        this.show = function (customModalDefaults, customModalOptions) {
            //Create temp objects to work with since we're in a singleton service
            var tempModalDefaults = {};
            var tempModalOptions = {};

            //Map angular-ui modal custom defaults to modal defaults defined in service
            angular.extend(tempModalDefaults, modalDefaults, customModalDefaults);

            //Map modal.html $scope custom properties to defaults defined in service
            angular.extend(tempModalOptions, modalOptions, customModalOptions);

            if (!tempModalDefaults.controller) {
                tempModalDefaults.controller = function ($scope, $modalInstance) {
                    $scope.modalOptions = tempModalOptions;
                    $scope.modalOptions.ok = function (result) {
                        $modalInstance.close(result);
                    };
                    $scope.modalOptions.close = function (result) {
                        $modalInstance.dismiss('cancel');
                    };
                }
            }

            return $modal.open(tempModalDefaults).result;
        };

    });
<!DOCTYPE html>
<html>
<head >
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="ui-bootstrap.js"></script>
  <meta charset="utf-8">
  <title>test</title>
</head>

<body ng-app="myApp">
  <div ng-controller="TestCTRL">
   <button type="button" ng-click="login()">Login</button>
   </div>
<script src="app.js"></script>
</body>
</html>

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-md-4 col-md-offset-4">
      <div class="account-wall">
        <h1 class="text-center login-title">Login</h1>
        <form name="loginForm" ng-submit="modalOptions.submitForm(loginForm)" class="form-signin" novalidate>
          <div class="form-group">
            <label for="email" class="control-label">Email</label>
            <input id="email" type="email" name="email" placeholder="Email"
                   class="form-control" ng-model="user.email" required autofocus>
            <div ng-messages="loginForm.email.$error" ng-if="loginForm.$submitted || loginForm.email.$touched" class="errors">
              <div ng-message="required">Value required</div>
              <div ng-message="email">Valid email required</div>
            </div>
          </div>
          <div class="form-group">
            <label for="password" class="control-label">Password</label>
            <input id="password" type="password" name="password" placeholder="Password"
                   class="form-control" ng-model="user.password" required>
            <div ng-messages="loginForm.password.$error" ng-if="loginForm.$submitted || loginForm.email.$touched" class="errors">
              <div ng-message="required">password is required</div>
            </div>
          </div>

          <button class="btn btn-lg btn-primary btn-block" type="submit">
           Login
          </button>
          <button class="btn btn-lg btn-primary btn-block" type="button" ng-click="modalOptions.close()">
           {{modalOptions.closeButtonText}}
          </button>
        </form>
      </div>
    </div>
  </div>
</div>

Thanks so much for your help.

非常感谢你的帮助。

1 个解决方案

#1

I resolved it by setting the form to pristine before closing the modal, in the cancel action function

我通过在取消动作函数中关闭模态之前将表单设置为pristine来解决它

 function _cancel()
 {
     $scope.newForm.$setPristine();
     $modalInstance.close();
 }

#1

I resolved it by setting the form to pristine before closing the modal, in the cancel action function

我通过在取消动作函数中关闭模态之前将表单设置为pristine来解决它

 function _cancel()
 {
     $scope.newForm.$setPristine();
     $modalInstance.close();
 }
标签：

相关文章