Использование $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 истинным всякий раз, когда пользователь изменяет форму. Спасибо

Источник

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и этот флаг будет меняться по мере загрязнения формы.

Рабочий планкр

Источник
Другие вопросы по тегам