Does Angularjs not read input of the Hidden type?

Question

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

I noticed that Angularjs was not capturing the value of this Hidden input, which was needed to know the id of the selected product.

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

Thus:

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

In Angular JS we have this code:

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

But when calling the function salvar with the ng-submit, the value of entrada.produto_id, but only the other fields.

We found that it was necessary to get jQuery to make a trigger('input') when inserting the value in #produto_id. But it still didn’t work. But it all worked correctly when we replaced the hidden for text (with display:none);

Observing: First, before asking the question, I would like to point out that the purpose of this question is not to know how to get around this situation, because, as mentioned above, we have already solved.

I just wondered if it’s an official statement to say that the AngularJS does not read inputs of type Hidden.

Answer 1

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

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

Like the field hidden will never be edited (at least that’s what we expect) no need to have Two-Way DataBinding, only the initial definition of its value.

---

In the latest versions of AngularJs (Tested from version 1.5), the behavior is a little different. What determines whether a "field" exists within a form - to the "eyes" of AngularJs - is the statement of name and ngModel, that is, if there are no such 2 attributes, the field simply "does not exist" and therefore it is not possible to obtain 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 has always been possible to read its value when using the traditional method of sending forms from the AngularJS - ngSubmit.

Take this example: https://plnkr.co/edit/qsxDbTPbX4km3c9skEAz?p=preview

---

Why does your version not work?

At no time the value you wish to pass to the field was sent through the middle AngularJs, that is, it was not applied to your ngModel. When we users interact with the field we have ngModel, it automatically updates your value, logo, the value is updated.

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

---

Different from the previous versions, where it was necessary some "crafty art" to be able to get around this situation, for example:

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

All we need to do is:

• Declare the attributes name and ngModel;
• Assign the value to ngModel and not to your value;

Note: Here it will not be possible to make this statement using jQuery. You would need to merge the two to get the final result. I didn’t get to test it, but it would be 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 field hidden inside AngularJs works. Just make the correct statement so that it is recognized as a valid element "in the eyes" of our dear Angular.