angularjs - Bootstrap 模态验证在关闭时显示

Question

我在 AngularJS 中有一个表单 View ，我正在使用来自 Angular-ui 的模式来显示我的表单。功能方面，一切都很好，但是，当我关闭表单时，如果表单无效，则会显示验证弹出窗口。

这是它的样子:



当表单打开时，弹出窗口根本不显示，但只有当我单击取消并开始消失时才会显示。

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>

模态 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');
        };
    }
);

Answer 1

将 novalidate 属性添加到您的表单以禁用内置验证的浏览器:

<form name="myForm" novalidate >