5
Answers

Clear textbox after click on reset button using angularjs

Ajay Shedge

Ajay Shedge

9y
3.3k
1
Hello,
 
I am creating on form using ASP.Net MVC and AngularJS. I have one textbox which is mandatory, one submit button and one clear button. If textbox remains blank and I clicked on submit button then textbox border color get red.But when I clicked on reset button I want to clear textbox button and remove border color. I have attached my code and snap.
 
Please give me solution
Answers (5)
0
Manimekalai Ganesan
NA 1.4k 213.1k 9y
try out this coding Ajay
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="">
<style>
input.ng-dirty.ng-invalid {
background-color: red;
}
input[required].ng-pristine
{
border-color: Silver;
/*background-color: yellow;*/
}
input[required].ng-dirty.ng-valid {
background-color: yellow;
}
</style>
<div ng-controller="MyCtrl">
<form name="name">
<script>
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.reset = function() {
$scope.requiredField = '';
// Todo: Reset field to pristine state, its initial state!
};
}
</script>
<input name="requiredField"
type="text"
ng-model="requiredField"
required="required">Required field<br>
<button ng-click="reset()">Reset</button>
</form>
<hr/>
Pristine: {{form.$pristine}}
</div>
</body>
</html>
 
Accepted
0
Ajay Shedge
NA 37 7.8k 9y
Thanks a lot Manimekalai it's very helpful for me.
0
Manimekalai Ganesan
NA 1.4k 213.1k 9y
Hi Ajay, refer the following it give some idea for your issue
 
https://jsfiddle.net/juurlink/FWGxG/7/
http://stackoverflow.com/questions/12603914/reset-form-to-pristine-state-angularjs-1-0-x
0
Ajay Shedge
NA 37 7.8k 9y
Hi Manimekalai, Thanks for reply, It's working fine but when I clicked on reset button textbox color remains red. I want to set textbox border color as initially.How to do that
0
Manimekalai Ganesan
NA 1.4k 213.1k 9y
Hi Ajay refer this link 
http://stackoverflow.com/questions/18648427/angular-clear-subform-data-and-reset-validation