AngularJS с компонентами $ pristine возвращает неопределенное значение, пока заданы имена - PullRequest
Новая
       11

AngularJS с компонентами $ pristine возвращает неопределенное значение, пока заданы имена

0 голосов
/ 27 августа 2018

Я хочу проверить, какие поля изменены в моей форме, с помощью $pristine. Тем не менее, я использую AngularJS с компонентами. Я попытался этот ответ, но мои имена установлены в форме и изменены $scope.myForm на массив с полями формы. Но console.log возвращает undefined на value.$pristine. 

angular.forEach(_self.form, function(value, key) {
    if(key[0] == '$') return;
    console.log(key, value.$pristine)
});

_self ссылка на это, поэтому значения могут быть установлены внутри функций и использованы в представлении.

Как мне получить фактическое значение $pristine?

Редактировать: HTML-форма добавлена ​​

<form>
    <div class="form-group">
        <label for="name">Name</label>
        <input ng-model="$ctrl.form.name" class="form-control" id="name" name="name" type="text" />
    </div>
</form>

Ответы [ 2 ]

0 голосов
/ 28 августа 2018

Использование $pristine(); 

angular.forEach(_self.form, function(value, key) {
    if(key[0] == '$') return;
    console.log(key, value.$pristine())
});

Вот как вы это делаете, вам не хватает скобок. Мы не используем их, когда мы находимся в HTML, но в контроллере мы должны использовать их. Потому что мы invoking функция здесь, которая будет return нам boolean value (true | false).

Надеюсь, я ответил на ваш вопрос. Если у вас есть путаница или проблема, то дайте мне знать. И если ваш ответ, дайте мне знать тоже.

0 голосов
/ 27 августа 2018

Свойство $pristine не установлено в вашей модели ($ctrl.form). На самом деле он установлен на ngFormController. Однако для того, чтобы он был определен на вашем контроллере, вы должны определить имя формы в вашем теге формы, как показано ниже: 

<form name="$ctrl.form">
    <div class="form-group">
        <label for="name">Name</label>
        <input ng-model="$ctrl.model.name" class="form-control" id="name" name="name" type="text" />
    </div>
</form>

Обратите внимание, что я изменил ng-model="$ctrl.form.name" на ng-model="$ctrl.model.name", потому что модель отличается от контроллера формы. Поэтому ваша модель должна быть зарегистрирована где-то еще.

Кроме того, вы можете использовать <div ng-form="$ctrl.form">, чтобы связать директиву ngForm в элементе, отличном от form.

Наконец, ngForm свяжет ngFormController с вашим контроллером (this), чтобы вы могли иметь доступ к своему первоначальному состоянию внутри вашего контроллера, как в следующем фрагменте. 

var _self = this;

_self.$postLink = function () {
    angular.forEach(_self.form, function(value, key) {
        if(key[0] == '$') return;
        console.log(key, value.$pristine)
    });
};

Обратите внимание, что я использовал хук _self.$postLink, потому что форма будет готова только после того, как закончится фаза связи компонента (это означает, что потомок полностью связан с родителем, следовательно, postLink).

Вы можете проверить полный рабочий фрагмент ниже: 

angular.module('app', [])
  .component('app', {
    template: `
      <form name="$ctrl.form">
        <div class="form-group">
            <label for="name">Name</label>
            <input ng-model="$ctrl.model.name"
              type="text"
              class="form-control" 
              id="name"
              name="name"  />
        </div>
    </form>
    `,
    controller: function() {

      var _self = this;
      this.$postLink = function() {
        angular.forEach(_self.form, function(value, key) {
          if (key[0] == '$') return;
          console.log(key, value.$pristine)
        });
      };
    }
  })
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script>
<div ng-app="app">
  <app></app>
</div>
...