Подтвердить что ты не робот

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

4b9b3361

ОТВЕТЫ

Ответ 1

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

Разметка

  <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 будет просто undefined во время инициализации контроллера, если вы действительно хотите доступа $scope.myForm от контроллера, тогда вам нужно поместить этот код в $timeout, который будет запускать код функции $timeout в следующем цикле дайджест.

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

Обновить

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

Рабочий Plunkr