Проверка формы AngularJS с использованием JQueryUI Dialog

Я пытаюсь проверить форму с помощью углового, проблема заключается в том, что форма находится внутри диалогового окна JqueryUI, и нет кнопки отправки для подтверждения углового. Как я могу это достичь? Например, отключение кнопки или выполнение какой-либо проверки после нажатия кнопки (как это сделать за пределами области)?Проверка формы AngularJS с использованием JQueryUI Dialog

Я создал Plunker с демо

Index Page

<head> 
    <script data-require="[email protected]*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script> 
    <link data-require="[email protected]*" 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="[email protected]*" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script> 
    <script data-require="[email protected]*" 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 
     } 
     } 
    }); 

});

источник

2013-10-15 hjgraca

Что вы можете сделать, это удалить код кнопки из DIALOG вызова в JS, как показано ниже,

$("#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 
    } 
}

источник

2014-03-03 10:56:45 Achyut

@hjgraca - вы также можете добавить вы формируете validatiion код в состоянии еще в код контроллера – Achyut

Проверка формы AngularJS с использованием JQueryUI Dialog

ответ

Смежные вопросы