我正在使用 Angular 1.3。我在模态弹出窗口中有一个表单。提交表单后，我的模态弹出表单将被重置，如果我单击取消按钮，我的表单也会重置
$scope.add_user = function(add_form)
{
if(add_form.$valid)
{
$http({
method:'POST',
url:file_path,
headers:{'Content_Type':'appliaction/json'},
data:$scope.text
}).success(function(data){
$scope.modalShown_add = ! $scope.modalShown_add;
$scope.modalShown_addsuccess = !$scope.modalShown_addsuccess;
$scope.getlist();
add_form.reset();
}).error(function(data){
add_form.reset();
})
}
}
但是当我出现任何验证错误时，如果我单击页面的任何位置，我的模式弹出窗口在打开模式弹出窗口后会关闭，我无法重置我的表单。假设如果我在添加函数中传递表单名称来重置我收到错误的表格
$scope.add =function()
{
$scope.modalShown_add = ! $scope.modalShown_add;
}
Each form指令创建一个实例FormController所以你可以通过设置 name 属性来访问它，例如name="$ctrl.addForm".
要清除表单，您需要清除模型，然后使用表单控制器控制验证状态 https://code.angularjs.org/1.3.20/docs/api/ng/type/form.FormController您的表格（请参阅resetForm方法）：
angular.module('myApp', [])
.controller('MyCtrl', ['$scope', function MyCtrl($scope) {
var ctrl = this;
ctrl.users = [];
ctrl.showPopup = false;
ctrl.openModal = openModal;
ctrl.saveUser = saveUser;
function openModal(user) {
ctrl.showPopup = true;
ctrl.user = angular.copy(user); // a copy of the user to disable 2-way binding with the list
resetForm(ctrl.addForm);
}
function resetForm(form){
form.$setPristine(); //set the form to its pristine state
form.$setUntouched(); //set the form to its untouched state
}
function saveUser(user){
//your saving logic here it is just a sample
if (!user.id){
user.id = ctrl.users.length;
ctrl.users.push(user);
} else {
ctrl.users[user.id] = user;
}
//hide pop up
ctrl.showPopup = false;
}
$scope.$ctrl = ctrl;
}])
.directive('modalDialog', function() {
return {
restrict: 'E',
scope: {
show: '='
},
replace: true,
transclude: true,
link: function(scope, element, attrs) {
scope.dialogStyle = {};
if (attrs.width)
scope.dialogStyle.width = attrs.width;
if (attrs.height)
scope.dialogStyle.height = attrs.height;
if (attrs.overflow)
scope.dialogStyle.overflow = attrs.overflow;
scope.hideModal = function() {
scope.show = false;
};
},
template: "<div class='ng-modal' ng-show='show'><div class='ng-modal-overlay' ng-click='hideModal()'></div><div class='ng-modal-dialog' ng-style='dialogStyle'><div class='ng-modal-close' ng-click='hideModal()'><i class='fa fa-times-circle'></i></div><div class='ng-modal-dialog-content' ng-transclude></div></div></div>"// See below
};
});
.ng-invalid.ng-touched {
border: 1px solid red;
}
.ng-modal{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.ng-modal-overlay{
background-color: black;
opacity: 0.3;
z-index: 0;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.ng-modal-dialog {
position: relative;
top: 50%;
z-index: 1;
background-color: white;
padding: 1em;
border: 1px solid gray;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.angularjs.org/1.3.20/angular.js"></script>
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<!-- send en empty object to create a new user -->
<button ng-click="$ctrl.openModal({})">Show</button>
<div>
<a href="javasctript: void(0);" ng-repeat-start="u in $ctrl.users" ng-click="$ctrl.openModal(u)">{{u.name}}</a><span ng-repeat-end ng-if="!$last">, </span>
</div>
<modal-dialog show="$ctrl.showPopup">
<form name="$ctrl.addForm" ng-submit="$ctrl.saveUser($ctrl.user)">
<input name="user_name" ng-model="$ctrl.user.name" type="text" ng-required="true"/>
<div>
<button type="submit">Save</button>
<button type="button" ng-click="$ctrl.showPopup = false;">Cancel</button>
</div>
</form>
</modal-dialog>
</div>
</div>
希望这对您有帮助。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
