CODEWITHSUNDEEP
angularforms
Bail P
Bail P

Reputation: 281

NgForm giving two different statuses

I have a very bizarre issue. I have a (template driven) form in my html which I access via @Viewchild. I have several buttons in my form and when one of them is clicked, I am calling this method:

check() {  
    console.log(this.testForm);
    console.log(this.testForm.status);
  }

When I click any of the buttons for the first time when the page loads, the status property of the testForm in the first console.log displays a different value to the second console.log.

Any ideas why this might be? I've also tried accessing the valid property and this is also different.

Upvotes: 0

Views: 14

Answers (1)

TotallyNewb
TotallyNewb

Reputation: 4820

For more complex objects (IIRC with more than one level of nested properties, but don't take my word for it), objects outputted in the console.log will be evaluated upon expanding them. This means that if you don't put breakpoint after the first console.log and expand the object, it will be evaluated afterwards, possibly after other functions have ran that could have changed the state of the object.

For example take a simple case:

var test = {
    inner1: {
        inner2: 'test'
    }
};
console.log(test);
console.log(test.inner1.inner2);
test.inner1.inner2 = 'other';
console.log(test);

If you run it in your console, you'll see that the console.log(test.inner1.inner2) will print test, while the first console.log(test) will print an unexpanded object. Upon expanding it, you will see that the inner2 has value of other.

Of course that depends on the environment - I'm basing my experience on the chromium browser, perhaps other debugging tools (other browsers, VS code debugger, etc.) handle it differently.

Upvotes: 1

Related Questions