AngularJS textbox value undefined

Question

I have created a directive wherein it copies the value of textbox1 to textbox2.

function myCopyText() {
    return {
        restrict: 'A',
        link: function(scope, element, attr) {
            $('#textbox2').val($('#textbox1').val())
        }
    }
}

Then on the textbox field:

<input type="text" id="textbox1" ng-model="vm.textbox1" my-copy-text />
<input type="text" id="textbox2" ng-model="vm.textbox2" />

It works fine until I submitted the form wherein vm.textbox2 is always undefined. But if I manually inputted a value on textbox2, vm.textbox2 is able to display the value.

I find it weird that when the directive do the value assignment, vm.textbox2's value is always undefined not until I manually set a value by typing it in.

$('textbox2') is looking for an element, you forgot # to depict an ID — Sterling Archer
– Sterling Archer, Commented Apr 7, 2017 at 16:00
Sorry, have modified the snippet above. Just some typos when placing them here but anyway.. still doesn't work. — basagabi
– basagabi, Commented Apr 7, 2017 at 16:02
That's by design. Why don't you just use the same ngModel for both inputs? — EProgrammerNotFound
– EProgrammerNotFound, Commented Apr 7, 2017 at 16:06

EProgrammerNotFound · Accepted Answer · 2017-04-07 16:38:01Z

1

That's by design. The angular digest kicks in when you change the value via the input/change event therefore val() will not trigger the setViewValue, so the model value will not be updated.

This directive will replicate the value from the model/view to the name you pass in the replicate-to attribute:

function replicateTo($parse) {
   return {
        scope: false,
        require: 'ngModel',
        restrict: 'A',
        link: function(scope, element, attr, ngModelCtrl) {
             var target = $parse(attr.replicateTo);

             var angularRender = ngModelCtrl.$render;

             ngModelCtrl.$render = function(){
                angularRender();
                target.assign(scope, ngModelCtrl.$viewValue);
             };

             ngModelCtrl.$viewChangeListeners.push(function(){
                target.assign(scope, ngModelCtrl.$viewValue);
             });
        }
    }
}

<input type='text' ng-model="vm.textbox1" data-replicate-to="vm.textbox2"/> <br>

edited Apr 7, 2017 at 16:38

answered Apr 7, 2017 at 16:27

EProgrammerNotFound

2,4815 gold badges32 silver badges64 bronze badges

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

7 Comments

basagabi Over a year ago

This is binding from textbox1 to textbox2 but the problem still persists when submitting the form. vm.textbox2 still have an undefined value unless I manually input a value on textbox2.

EProgrammerNotFound Over a year ago

I've tested here and it is working as expected, can you show me your html?

EProgrammerNotFound Over a year ago

Nevermind, you missed the name property which is required to generate the query string in the submit event

basagabi Over a year ago

name is not required as I get values from the ng-model and pass via ajax. As i've said also, i can get the value of textbox1 but not textbox2

EProgrammerNotFound Over a year ago

If the first fiddle, based on my solution is working what is the question? Go ahead and use my solution. The second one won't work because, as I've said in my answer, the JQuery method val doesn't trigger changes in the model

|

Collectives™ on Stack Overflow

AngularJS textbox value undefined

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related