I have implemented a form view in AngularJS with a modal from Angular-ui to showcase my form. I am happy with how everything functions, but there is one issue - when I dismiss the form, validation pop-ups appear if the form is not valid.
Here is an overview of what is happening:
The validation pop-up only appears as I close the form by clicking cancel and it begins to fade away.
Below is the HTML code:
<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');
};
}
);