AngularJS with components $pristine returns undefined while names are set

Question

I want to check which fields are changed in my form with $pristine. However, I am using AngularJS with components. I tried this answer, but I have my names set in the form and changed $scope.myForm to the array with my form fields. But the console.log returns undefined on value.$pristine.

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

_self reference to this so values can be set inside functions and used in the view.

How do I get the actual $pristine value?

Edit: HTML form added

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

Can you show the template you defined your form? – lenilsondc Aug 27 '18 at 16:53 — lenilsondc, Aug 27 '18 at 16:53
You should share the view and js code for more help. – Akash Gadhiya Aug 27 '18 at 17:00 — Akash Gadhiya, Aug 27 '18 at 17:00
@lenilsondc see edited question – Marc Aug 27 '18 at 17:06 — Marc, Aug 27 '18 at 17:06

lenilsondc · Answer 1 · 2018-08-27T18:02:32.877

The $pristine property is not set on your model ($ctrl.form). It is actually set on the ngFormController. However, in order to have it defined on your controller, you have to define the form name on your form tag like bellow:

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

Notice that I changed ng-model="$ctrl.form.name" to ng-model="$ctrl.model.name", because model is different than form controller. Therefore, your model has to be registered somewhere else.

Alternatively, you can use <div ng-form="$ctrl.form"> to bind the ngForm directive in a different element than form.

Finally, ngForm will bind an ngFormController into your controller (this) so that you can have access to your pristine state inside your controller like the following snippet.

var _self = this;

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

Notice that I used the _self.$postLink hook, because the form will only be ready after the component link phase ended (it means child are fully linked to parent, hence postLink).

You can check the full working snippet bellow:

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>

Having an issue with getting the value in the input field. Will review this later, cheers anyway! — Marc, Aug 28 '18 at 15:07

score 1 · Answer 2 · edited Aug 28 '18 at 17:10

Use $pristine();

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

This is how you do it, you are missing the parenthesis. We don't use them when we are in html, but in controller we need to use them. Because we are invoking a function here that will return us a boolean value (true|false).

I hope, I answered your question. If you have confusion or problem then let me know. And if its your answer let me know too.

AngularJS with components $pristine returns undefined while names are set

2 Answers2