The AngularJS ngModelController is a powerful tool for managing

Question

The AngularJS ngModelController is a powerful tool for managing

How can I accurately check ngModelController validity?

Within my directive, I have a controller object. When I console.log the object from inside the directive, it displays:

console.log(ctrl)

$dirty: false
$invalid: true
$modelValue: ""
$name: undefined
$pristine: true
$valid: false
$viewValue: ""
...

Subsequently, when I use if( ctrl.$valid === true ) to log the object again, it shows the same output as before.

console.log(ctrl); //ctrl.$valid is false
if(ctrl.$valid == true) {
    console.log(ctrl); //ctrl.$valid is false
}

In addition, upon inspecting the element, I notice that the correct ng-invalid class is indeed applied.

I intend to create a plnkr to illustrate this issue, although duplicating it may prove challenging.

Update When I use console.log(ctrl.$valid), it returns true. This clarifies why the condition passes, but not why the object form displays $valid as false.

Furthermore, I have created a plnkr showcasing a similar scenario without encountering the same problem. example

javascript angularjs google-chrome google-chrome-devtools

Answer 1

Answer №1

Did you experiment with the following:

console.log(JSON.stringify(ctrl));
if(ctrl.$valid == true) {
    console.log(JSON.stringify(ctrl));
}

or

console.log("$valid is ", ctrl.$valid);
if(ctrl.$valid == true) {
    console.log("$valid should be true and is actually ", ctrl.$valid);
}

This issue could possibly be connected to a previous Chrome bug. It seems like when expanding an object in the console, the value displayed reflects the object state at expansion time rather than log time. Thus, printing the object as a string or cloning it while logging may resolve this.

Update - Providing further insights...

If you execute

var obj = {a: 1, b: {}}; console.log(obj); obj['a'] = 2; console.log(obj);

in the Chrome console, you will observe the following output:

> Object {a: 1, b: Object}
  a: 2
  b: Object
  __proto__: Object

> Object {a: 2, b: Object}
  a: 2
  b: Object
  __proto__: Object

Additional Update

Hoping this clarifies your query. It seems like there might be a situation where you are adding a parser to the $parsers array after calling $setViewValue(...). Consequently, during initial directive initialization, any added validations might not have been executed. To trigger them manually, consider calling something like

ctrl.$setViewValue(ctrl.$viewValue);

after incorporating your parser.

Answer 2

Did you experiment with the following:

console.log(JSON.stringify(ctrl));
if(ctrl.$valid == true) {
    console.log(JSON.stringify(ctrl));
}

or

console.log("$valid is ", ctrl.$valid);
if(ctrl.$valid == true) {
    console.log("$valid should be true and is actually ", ctrl.$valid);
}

This issue could possibly be connected to a previous Chrome bug. It seems like when expanding an object in the console, the value displayed reflects the object state at expansion time rather than log time. Thus, printing the object as a string or cloning it while logging may resolve this.

Update - Providing further insights...

If you execute

var obj = {a: 1, b: {}}; console.log(obj); obj['a'] = 2; console.log(obj);

in the Chrome console, you will observe the following output:

> Object {a: 1, b: Object}
  a: 2
  b: Object
  __proto__: Object

> Object {a: 2, b: Object}
  a: 2
  b: Object
  __proto__: Object

Additional Update

Hoping this clarifies your query. It seems like there might be a situation where you are adding a parser to the $parsers array after calling $setViewValue(...). Consequently, during initial directive initialization, any added validations might not have been executed. To trigger them manually, consider calling something like

ctrl.$setViewValue(ctrl.$viewValue);

after incorporating your parser.

The AngularJS ngModelController is a powerful tool for managing

Answer №1

Similar questions

How to transform a file into a uInt8Array using Angular

Does the method in the superclass "not exist" within this type....?

Understanding the source of an useEffect's trigger to create a conditional statement

Storing information within a Express application using Postgres

The Angular User Interface Router is a versatile tool for managing

Discover the inner workings of the code below: set a variable called "start" to the current time using the new Date().getTime() method. Create a loop that continuously checks if

When the `back` button is clicked in a browser from a different domain, does it trigger a page reload?

Executing an automated process of adding items to the shopping cart using Python without the need to have a

Import HTML document into a Bootstrap Popup

Error in Continuous Integration for Angular 4: Unable to access property 'x' of an undefined variable

Discovering the smallest and largest values in an object literal using JavaScript

Retrieving the hidden field value using JavaScript on the server side

Having trouble sorting data-text values that include colspan cells

The use of ReactDom.render is no longer permissible in Next.js

Tips for incorporating a download button into a video player using Plyr JS

Dynamically add index to attribute as it updates

Update the variables upon a click event following the completion of an AJAX request

The operation of "grunt build" results in a Lexer Error, causing the ng-include

Tips for modifying and refreshing data in a live table with JQuery

ngPattern problem