Question

我正在尝试使用Angular验证表单，问题是表单在JqueryUI对话框中，并且没有提交按钮来验证角度。我怎么能做到这一点？例如，在按下按钮后禁用按钮或进行一些验证（如何在范围之外进行验证）？

我创建了一个带有演示的Plunker

索引页面

  <head>
    <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <link data-require="jqueryui@*" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
    <script data-require="jqueryui@*" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
    <script data-require="angular.js@*" data-semver="1.2.0-rc3" src="http://code.angularjs.org/1.2.0-rc.3/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>
  <body>
<div id="dialog-form" title="Create new user" ng-controller="NewUserController">
  <form name="newUserForm">
  <fieldset>
    <label for="name">Name</label>
    <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" ng-model="name" required/>
    <label for="email">Email</label>
    <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" ng-model="email" required/>
    <label for="password">Password</label>
    <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" ng-model="password" required/>
  </fieldset>
  </form>
</div>

  </body>

</html>

的Javascript

function NewUserController($scope){

  }

$(document).ready(function(){

  $("#dialog-form").dialog({
      autoOpen: true,
      height: 400,
      width: 350,
      modal: true,
      buttons: {
        "Create an account": function() {
          // Validation
        }
      }
    });

});

Answer 1

你可以做的是从JS中的DIALOG调用中删除你的按钮代码，如下所示，

$("#dialog-form").dialog({
  autoOpen: true,
  height: 400,
  width: 350,
  modal: true,
});

使用Jquery UI对话框加载对话框。

在HTML中添加按钮代码，如

<div class="button">
    <a name="submit" href="#" ng-click="submitform()" class=""></a>
</div>

在您的控制器中，您可以检查

等验证

 $scope.submitform = function () {
    if ($scope.newUserForm.$valid) {
        alert('form is valid');
        //Write your form submission logic here
    }
}

使用JqueryUI Dialog进行AngularJS表单验证

1 个答案: