Question

166

Using $dirty in angularjs in order to check whenever a form is being edited

rated 0 times [ 167] [ 1] / answers: 1 / hits: 54904 / 9 Years ago, thu, may 7, 2015, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

noel

Add To Favorites

Follow

Total Points: 49

Total Questions: 90

Total Answers: 104

Location: Aland Islands

Member since Wed, Nov 17, 2021

3 Years ago

answered 9 Years ago draven · Accepted Answer

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