I have a form view in AngularJS and I'm using a modal from Angular-ui to display my form. Functionality wise, everything works great, however, when I dismiss the form, validation pop-ups display if the form is invalid.
我在AngularJS中有一个表单视图,我使用Angular-ui中的一个模态来显示我的表单。功能明智,一切都很好,但是,当我关闭表单时,如果表单无效,则显示验证弹出窗口。
This is what it looks like:
这就是它的样子:
The pop-up doesn't show at all when the form is open but only when I click cancel and it starts fading away.
当表单打开时,弹出窗口根本不会显示,但只有当我单击取消并且它开始逐渐消失时才会显示。
HMTL:
<form name='newGroupForm'>
<div class="modal-body">
<label for="groupName">Group Name:
<input id="groupName" type="text" ng-model='newGroup.name' required>
</label>
<br/>
<label for="groupDesc">Group Description:
<input id="groupDesc" type="text" ng-model='newGroup.desc'>
</label>
<br/>
<label for="groupOwner">Group Name:
<select id="groupOwner" type="text" ></select>
</label>
</div>
<div class="modal-footer">
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
<button class="btn btn-primary" type="button" ng-click="submit()" ng-disabled="newGroupForm.$invalid">Create</button>
</div>
</form>
Modal Controller:
spApp.controller('newGroupCtrl',
function newGroupCtrl($scope, $modalInstance, groupService){
$scope.newGroup = {
name:null,
desc: null
};
$scope.submit = function(){
$modalInstance.close($scope.newGroup);
}
$scope.cancel = function (){
$modalInstance.dismiss('Cancelled group creation');
};
}
);
1 个解决方案
#1
7
Add the novalidate attribute to your form to disable the browsers built in validation:
将novalidate属性添加到表单以禁用验证中内置的浏览器:
<form name="myForm" novalidate >
#1
7
Add the novalidate attribute to your form to disable the browsers built in validation:
将novalidate属性添加到表单以禁用验证中内置的浏览器:
<form name="myForm" novalidate >