I am trying to validate input fields on submit/ok button click in a modal window using angularjs framework. What I have tried are to add the attributes required/ng-required on my input button. But on my ok button click the input text field is not validated and the modal window is dismissed. As below is my modal-body. I would like to see the angular behaviour of showing the red border around it on click of ok.
<div class="modal-body">
<input type="text" class="input-box" size="10" required ng-model="data.myNumber"/>
</div>
Is there something additional I need to do in my event handler for submit buttons? Below is a plunker I created for the demo. Any help would be highly appreciated. By the way the plunker will run only in firefox.
I am trying to validate input fields on submit/ok button click in a modal window using angularjs framework. What I have tried are to add the attributes required/ng-required on my input button. But on my ok button click the input text field is not validated and the modal window is dismissed. As below is my modal-body. I would like to see the angular behaviour of showing the red border around it on click of ok.
<div class="modal-body">
<input type="text" class="input-box" size="10" required ng-model="data.myNumber"/>
</div>
Is there something additional I need to do in my event handler for submit buttons? Below is a plunker I created for the demo. Any help would be highly appreciated. http://plnkr.co/edit/ACoTQgIVnWnR92LngT89?p=preview By the way the plunker will run only in firefox.
Share Improve this question edited Oct 4, 2015 at 13:18 slacker asked Oct 4, 2015 at 11:53 slackerslacker 1571 gold badge3 silver badges13 bronze badges2 Answers
Reset to default 2First you'll need to use the correct elements and corresponding classnames. You'll need to wrap your input in a div
with classname form-group
, and that needs to be wrapped into a form
element. The actual input
needs to have the form-control
class:
<form>
<div class="form-group">
<input type="text" class="form-control" size="10" ng-model="data.myNumber" required/>
</div>
</form>
A nice read on properly using forms with bootstrap can be found here:
http://getbootstrap./css/#forms
Now that it's a proper bootstrap form you can add angular validation. That's very simple just by giving the form and the input a name attribute:
<form name="modalForm">
<div class="form-group">
<input name="modalInput" type="text" class="form-control" size="10" ng-model="data.myNumber" required/>
</div>
</form>
Now angular will preform validation in the background. It will add modalForm
to the scope of your modalcontroller from where you can get the state of the form and it's input elements.
Now because of the required
attribute the input and form has been deemed invalid which can be checked by using: modalForm.modalInput.$invalid
That will return true, when the input is empty . You can use it to add the has-error
class to the form-group
div element which will turn the border of the input element to red. You can dynamicly add this class by using the ng-class
directive:
<div class="form-group" ng-class="{ 'has-error': modalForm.modalInput.$invalid }" >
<input name="modalInput" type="text" class="form-control" size="10" ng-model="data.myNumber" required/>
</div>
</form>
You can also add a message which also will be colored through the has-error
class. Add a span
element with the help-block
class and use the ng-show
directive to toggle it on the required error:
<div class="form-group" ng-class="{ 'has-error': modalForm.modalInput.$invalid }" >
<input name="modalInput" type="text" class="form-control" size="10" ng-model="data.myNumber" required/>
<span ng-show="modalForm.modalInput.$error.required" class="help-block">Input is required.</span>
</div>
</form>
Now if you want to make it impossible to push the ok
button when the form is invalid you can toggle the disabled
class and/or add use the ng-disabled
directive:
<button class="btn btn-primary" ng-disabled="modalForm.$invalid" ng-class="{ 'disabled': modalForm.$invalid }" ng-click="ok()">OK</button>
I remend reading the previous link on bootstrap forms and the following guide for using angular's forms. It has good examples:
https://docs.angularjs/guide/forms
Here's the plete modal code and a working example on Plunker:
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">My Modal</h3>
</div>
<form name="modalForm">
<div class="modal-body">
<div class="form-group" ng-class="{ 'has-error': modalForm.modalInput.$invalid }" >
<input name="modalInput" type="text" class="form-control" size="10" ng-model="data.myNumber" required/>
<span ng-show="modalForm.modalInput.$error.required" class="help-block">Input is required.</span>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-disabled="modalForm.$invalid" ng-class="{ 'disabled': modalForm.$invalid }" ng-click="ok()">OK</button>
<button class="btn btn-primary" ng-click="cancel()">Cancel</button>
</div>
</form>
</div>
http://plnkr.co/edit/GUE3sGci478obwOrzhNw?p=preview
PS: i know it doesn't answer you question as to how to preform input validation on button click but that's because it's not "the angular way" of using forms. The above and the links i provide should give you a good idea on how to properly use validation within Angular. Hope it helps, good luck.
Here are the main directions to get what you want:
- Wrap your
input
in a<form>
element. - In the
ok()
function, close modal only if it's valid
I also replaced type="text"
with type="number"
, since you want the user to input a number. Also corrected the plunker to make it work:
ModalInstanceController
app.controller('ModalInstanceCtrl', function($scope, $modalInstance){
$scope.ok = function () {
if ($scope.numberForm.$valid) {
$modalInstance.close();
}
};
// ...
}
HTML
<form name="numberForm">
<div class="form-group">
<input type="number" class="form-control input-box" required ng-model="data.myNumber"/>
</div>
<button class="btn btn-primary" ng-click="ok()" >OK</button>
<button class="btn btn-primary" ng-click="cancel()">Cancel</button>
</form>
See plunker
Improvement: Play with angular validation to add red borders if input is invalid:
<form name="numberForm">
<div class="form-group" ng-class="{ 'has-error' : numberForm.myNum.$invalid }">
<input type="number" name="myNum" class="form-control input-box" required ng-model="data.myNumber"/>
</div>
<button class="btn btn-primary" ng-click="ok()" ng-disabled="numberForm.$invalid">OK</button>
<button class="btn btn-primary" ng-click="cancel()">Cancel</button>
</form>
See forked plunker