AngularJS does not read input of type hidden?

Question

AngularJS does not read input of type hidden?

Navigation

#1 by (2 votes)

2

On one occasion, we were developing a form here in the company where, when selecting a product through an Autocomplete, the ID of that product was stored in a input hidden .

I noticed that AngularJS was not capturing the value of this input hidden, in which it was necessary to know id of the selected product.

Autocomplete was developed using jQuery , which inserts the value in the input hidden by val() .

So:

$('#produto_id').val($(this).data('id'));

In the Angular JS we have this code:

 <input type='hidden' ng-model="entrada.produto_id" id="produto_id">

However, when calling the function salvar with ng-submit , the value of entrada.produto_id does not appear, but only the other fields.

We found that it was necessary to have jQuery make a trigger('input') by entering the value in #produto_id . But it still did not work. But everything worked correctly when we replaced hidden with text (with display:none );

Comment : First of all, before asking the question, I would like to point out that the intent of this question is not to know how to circumvent this situation , since, as mentioned above, already we resolve.

I would just like to know if it's an official statement to say that AngularJS does not read hidden inputs.

angularjs

asked by anonymous 04.08.2016 / 22:06

1 answer

Reversing git pull ShellExecute without Security Warning

score 2 · Accepted Answer

Reading more of the subject and doing some tests, I noticed that this is the "expected" behavior of AngularJs when related to the input field and forms in general.

In older versions, this was due to the principle of Two-Way DataBinding ie 2-way communication. When the user changes the value in the input, it is automatically propagated to the controller.

As the hidden field will never be edited (at least that's what we expect) there is no need to have Two-Way DataBinding , just the initial definition of its value.

In the latest versions of AngularJs (tested since version 1.5), the behavior is slightly different. What determines whether a "field" exists within a form - to the "eyes" of AngularJs - is the declaration of name and ngModel , that is, if there are no such attributes, the field simply "does not exist" and therefore can not get its value (at least not in the traditional way).

Already with the declaration of these attributes, regardless of how and when its value is declared / defined, it was always possible to read its value when using the traditional method of sending forms AngularJS - ngSubmit . >

See this example: link

Why does not your version work?

At no time did the value you want to pass into the field sent by the AngularJs means, that is, it was not applied to your ngModel . When we, users, interact with the field that has ngModel , it automatically updates its value , so the value is updated.

However, the reverse does not happen. When we update the value of value , it is not passed to ngModel , see this example here . If you click the button to declare the value automatically and then submit the form, alert is undefined . However, if you just add 1 character and submit the form again, alert will already display the correct value.

Unlike previous versions, where some "art manhas" were needed to get around this situation, for example:

Use ngInit ;
Use value or ngValue ;
Hide input with class or style ;
Other more 'manual' methods, etc.

All we need to do is:

Declare the attributes name and ngModel ;
Assign the value to ngModel and not to its value ;

Note: Here you will not be able to make this statement using jQuery. You would need to merge the two to get the end result. I did not test, but it would look something like this:

var novoValor = jQuery(this).data('id'); //Note que dentro de uma função AngularJs a chamada de jQuery por '$' não funciona, devemos usar a declaração jQuery
$scope.valorHidden = novoValor;

In short: The hidden field within AngularJs works. Just make the correct statement so that it is recognized as a valid element "in the eyes" of our dear Angular .