Menu
I was trying to check whenever my form is being edited by writing some fields of it. I read $dirty should work for that task but I can't figure out what I'm missing here:
<!DOCTYPE html> <html lang="en"> <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> <body> <div ng-app="myApp" ng-controller="formCtrl"> <form name = "myForm" novalidate> First Name:<br> <input type="text" ng-model="user.firstName"><br> Last Name:<br> <input type="text" ng-model="user.lastName"> <br><br> <button ng-click="reset()">RESET</button> </form> <p> is Form dirty? {{isDirty}}<p> <p>form = {{user }}</p> <p>master = {{master}}</p> </div> <script> var app = angular.module('myApp', []); app.controller('formCtrl', function($scope) { $scope.master = {firstName:"John", lastName:"Doe"}; $scope.reset = function() { $scope.user = angular.copy($scope.master); }; $scope.reset(); $scope.isDirty = $scope.myForm.$dirty; }); </script> </body> </html> I'm trying to make the flag isDirty to true whenever the user modifies the form. Thanks
388
$dirty means the user has changed the input value, $invalid means the address itself is invalid. Therefore the error is only shown if the user has actively changed the input value to either an empty or invalid value.
You could also use ng-hide="somefield. length" instead of ng-show="!
How does Angular magically know how to update the content? It uses a technique called dirty checking. Angular tracks the previous values for these various expressions. If it notices a change, the corresponding Angular directive is given a chance to reflect those changes in the DOM.
You are missing name attributes in your form fields which are not enabling form validation for those field. You need to add unique name for each field so that it will get add those field in myForm object
Markup
<form name="myForm" novalidate> First Name:<br> <input type="text" name="firstName" ng-model="user.firstName"><br> Last Name:<br> <input type="text" name="lastName" ng-model="user.lastName"> <br><br> <button ng-click="reset()">RESET</button> </form> Also you are accessing myForm object which is nothing but form object, I won't be available until DOM get rendered, $scope.myForm will be simply undefined at the time of controller initilization, If you really want to access $scope.myForm from controller then you need to put that code in $timeout that will run $timeout function code in next digest cycle.
$timeout(function(){ $scope.isDirty = $scope.myForm.$dirty; }); Update
There is no need to maintain a separate isDirty flag (this would require to change the separate isDirty flag to reflect any changes in myForm.$dirty flag.) Instead I suggest you use $scope.myForm.$dirty directly as a flag. So use the expression myForm.$dirty, and this flag will change as form gets dirty.
Working Plunkr
81
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
