Reset form When modalpap is closed if I click anywhere on my page
I am using Angular 1.3. I have a form in a modal popup. After submitting the form, my modal popup form is reset and if I hit the cancel button my form is also reset
$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();
})
}
}
but when i have any validation error if i click anywhere on my page my modal popup closes after i open modal popup i cant reset my form. Suppose if I pass the name of the form to the add function to reset the form, I get the error
$scope.add =function()
{
$scope.modalShown_add = ! $scope.modalShown_add;
}
source to share
Each directive form
creates an instance FormController
, so you can access it by setting the name property as name="$ctrl.addForm"
.
To clear the form, you need to clear the model and then use a form controller to manage the validation state of your form (see 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>
Hope this helps you.
source to share