Within a standard modal popup in Bootstrap, I have implemented a form consisting of input fields, a submit button, a cancel button, and a close-icon. When selecting the name from an Object data-list using ng-repeat, the popup containing the form will display.
The following scenarios are present:
- Validation can be performed on the input fields by entering valid data and then clicking Submit. No problems encountered
If one chooses to click Cancel or the close icon without entering any value in the input fields, there are no issues.
Entering invalid data into the input fields and clicking Submit has been handled appropriately. No concerns
- If invalid data is entered and then Cancel or the close icon is clicked, this presents an issue.
The final scenario highlights the existing issue:
In the case where the first element from ng-repeat is clicked, the form loads within the popup. If the user closes the modal when the form contains errors, upon reopening, the form does not reset. This project uses 'controller as' instead of $scope, so $scope.formName.$setPristine() cannot be utilized from the controller directly.
A common way to reset the form would usually involve using the $scope in the controller but I am seeking an alternative method utilizing HTML and directives like ng-init.
EDIT 1:
As requested, I have included the code snippet along with a demonstration link: [https://jsfiddle.net/shashank2691/0k496jyd/](https://jsfiddle.net/shashank2691/0k496jyd/)
Note: In the demo example, upon clicking Submit in the popup, errors are displayed for invalid input fields.
Expected:
Upon closing and reopening the popup after initially opening it (with invalid form data), errors should not be displayed unless the fields are still invalid and the Submit button is pressed.
Actual:
When reopening the popup for the second time, errors beneath the invalid input fields are displayed once more.
HTML:
<div ng-app="app" ng-controller="test as ctrl">
<h4 class="lead" align="center">
Popup Display
</h4>
<div class="row">
<div ng-repeat="item in ctrl.dataList" class="col-xs-6 form-group" align="center">
<div class="img-thumbnail pointer" ng-click="ctrl.openPopup(item)" data-toggle="modal" data-target="#testPopup" data-backdrop="static">
<span>{{item.name}}</span>
</div>
</div>
</div>
<div id="testPopup" role="dialog" class="popup-modal-section modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<form name="inputForm.form" novalidate ng-submit="ctrl.saveData(inputForm.form.$valid, ctrl.selected);">
<h3 class="lead" align="center">
Profile Details:
</h3>
<div class="form-group">
<div>
<label>Name</label>
</div>
<div>
<input type="text" class="form-control" ng-model="ctrl.selected.name" name="name" ng-required="true" />
<span class="error" ng-show="(inputForm.form.name.$error.required || inputForm.form.name.$invalid)">Name is required</span>
</div>
</div>
<div class="form-group">
<div>
<label>City</label>
</div>
<div>
<input type="text" class="form-control" ng-model="ctrl.selected.city" name="city" ng-required="true" />
<span class="error" ng-show="(inputForm.form.city.$touched && inputForm.form.city.$error.required) || (inputForm.form.$submitted && inputForm.form.city.$error.required)">City is required</span>
</div>
</div>
<div align="right">
<button class="btn btn-primary" type="submit">
Submit
</button>
<button class="btn btn-default" data-dismiss="modal">
Close
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
JS:
var app = angular.module('app', []);
app.controller('test', function() {
var vm = this;
vm.dataList = [{
"id": "0",
"name": "Pankaj M."
}, {
"id": "1",
"name": "Rakesh G."
}, {
"id": "2",
"name": "Piyush C."
}, {
"id": "3",
"name": "Danny K."
}];
vm.openPopup = function(data) {
vm.selected = angular.copy(data);
};
vm.saveData = function(isValid, data) {
console.log('Form Valid ', isValid);
};
});
CSS:
.pointer {
cursor: pointer;
}
.error {
color: red;
}
Demonstration available at: [https://jsfiddle.net/shashank2691/0k496jyd/](https://jsfiddle.net/shashank2691/0k496jyd/)