Использование $dirty в angularjs для проверки всякий раз, когда форма редактируется

Я пытался проверить, когда моя форма редактируется, написав некоторые ее поля. Я читал $dirty должен работать для этой задачи, но я не могу понять, что мне здесь не хватает:

<!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>

Я пытаюсь сделать флаг isDirty true всякий раз, когда пользователь изменяет форму. Спасибо

18
angularjs form-editing forms javascript

1 ответов

вы пропали name атрибуты в полях формы, которые не позволяют проверку формы для этих полей. Вам нужно добавить уникальное имя для каждого поля, чтобы он мог добавить это поле в myForm объект

разметки

  <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>

также вы получаете доступ myForm объект, который является не чем иным, как объектом формы, я не буду доступен, пока DOM не будет визуализирован,$scope.myForm будет просто не определено во время инициализации контроллера, если вы действительно хочу получить доступ $scope.myForm от контроллера тогда вам нужно поместить этот код в $timeout что будет работать $timeout код функции в следующем цикле дайджеста.

  $timeout(function(){
    $scope.isDirty = $scope.myForm.$dirty;
  });

обновление

нет необходимости поддерживать отдельные isDirty флаг (для этого потребуется изменить отдельные isDirty флаг для отражения любых изменений в myForm.$dirty флаг.) Вместо этого я предлагаю вам использовать $scope.myForm.$dirty напрямую как флаг. Так используйте выражение myForm.$dirty, и этот флаг будет меняться по мере загрязнения формы.

Рабочая Plunkr

29