AngularJS - wrong input validation status

Question

I have an input and on ng-change i pass the Form.input in a function so i can do some stuff based on the inputs status (errors, valid/invalid...). But here is the weird thing: When i log the input i passed, i see in the console output that input.$valid = false which is the correct value. But when i log input.$valid itself i get that it is true which is false! Why is this happening??? When i try to parse input.$valid i get wrong value and i cannot do calculations based on that.

Here is the input:

<input ng-model="..."
       type="radio"
       name="input"
       ng-value={{v}}
       ng-disabled="field.readonly"
       ng-required="field.required"
       ng-init="test(Form.input)"
       ng-change="test(Form.input)">

And here is the test function:

$scope.test = function (object) {
    console.log(object);
    console.log(object.$valid);
    console.log(JSON.stringify(object));
};

and here is the log output:

// console.log(object);
c {$viewValue: NaN, $modelValue: NaN, $parsers: Array[1], $formatters: Array[1], $viewChangeListeners: Array[1]…}
$dirty: false
$error: Object
$formatters: Array[1]
$invalid: true
$isEmpty: function (a){return F(a)||""===a||null===a||a!==a}
$modelValue: undefined
$name: "input"
$parsers: Array[1]
$pristine: true
$render: function (){c[0].checked=d.value==e.$viewValue}
$setPristine: function (){this.$dirty=!1;this.$pristine=!0;g.removeClass(e,yb);g.addClass(e,Pa)}
$setValidity: function (a,c){p[a]!==!c&&(c?(p[a]&&n--,n||(k(!0),this.$valid=!0,this.$invalid=!1)):(k(!1),this.$invalid=!0,this.$valid=!1,n++),p[a]=!c,k(c,a),l.$setValidity(a,c,this))}
$setViewValue: function (d){this.$viewValue=d;this.$pristine&&(this.$dirty=!0,this.$pristine=!1,g.removeClass(e,Pa),g.addClass(e,yb),l.$setDirty());r(this.$parsers,function(a){d=a(d)});this.$modelValue!==
$valid: false
$viewChangeListeners: Array[1]
$viewValue: undefined
__proto__: Object


// console.log(object);
true 


// console.log(JSON.stringify(object));
{"$viewValue":null,"$modelValue":null,"$parsers":[null],"$formatters":[null],"$viewChangeListeners":[null],"$pristine":true,"$dirty":false,"$valid":true,"$invalid":false,"$name":"input","$error":{}}

UPDATE: I think i might have found something. When i do:

<input ...
       ng-init="{{test(Form.input)}}"
       ng-change="{{test(Form.input)}}">

instead of

<input ...
       ng-init="test(Form.input)"
       ng-change="test(Form.input)">

i get the correct result, but i also get an error in console:

Error: $parse:syntax
Syntax Error: Token 'test' is at column {2} of the expression [{3}] starting at [{4}].

Are you using functions in ng-init and ng-change just for testing purposes? — Malkus
– Malkus, Commented Aug 22, 2014 at 10:38
@Malkus no. i want to execute some other code depending on Form.input.$valid being true/false. But i need to make sure everything is working correctly so i use test() forn now. — Christos Baziotis
– Christos Baziotis, Commented Aug 22, 2014 at 10:41
Have you tried using $watch it to display the data and call your function it would be more effective. — Malkus
– Malkus, Commented Aug 22, 2014 at 10:43
yes but the problem is that when i try to parse Form.input.$valid i get the wrong value. — Christos Baziotis
– Christos Baziotis, Commented Aug 22, 2014 at 10:45

bmleite · Accepted Answer · 2014-08-22 10:42:31Z

3

I believe that there's nothing wrong with your code, it's just the way you are reading the console output.

By doing console.log(object) you are "printing" the JavaScript representation of the object. It's like if you were looking directly to the object's reference. This means that if the object is changed afterwards, you will see those changes as well. Think in it like the realtime representation of the object.

On the other logs (console.log(object.$valid); and console.log(JSON.stringify(object));) that doesn't happen because you are just printing strings/booleans, no object representations.

If you want to check the real object's content, stick to the:

console.log(JSON.stringify(object));

answered Aug 22, 2014 at 10:42

bmleite

26.9k4 gold badges74 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Christos Baziotis Over a year ago

No, console.log(JSON.stringify(object)); contains the wrong value. The input is invalid and it shows that is valid. when i put {{Form.input.$valid}} inside the HTML (view) i also see that the input is invalid. The problem shows up ONLY when i parse the input in javascript. It must have something to do with $valid. I think it needs to be evaluated by Angular in order to get the correct value. That's why it works when i do ng-init="{{test(Form.input)}}".

bmleite Over a year ago

The value is not wrong. You are just expecting it to be different, but that doesn't mean it is wrong. For that precise moment in time when you call test(object), the value is what it is. If you could provide a plunker it would be easier to explain... Also, for the sake of simplicity, don't use ng-init.

Collectives™ on Stack Overflow

AngularJS - wrong input validation status

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related