pre-populated form data is undefined in service

Question

jQuery:

$("#inputParentName").val(response.name);

HTML/Angular Form:

<form role="form" ng-submit="addParentService.addParent()">
    <div class="form-group">
        <label for="inputParentName">Name</label><input class="form-control" id="inputParentName" value="" type="text" ng-model="addParentService.inputParentName" />
    </div>
     ...
    <button class="btn btn-default" type="submit">Submit</button>
</form>

The following code when run diplays my name correctly in the input box.

However in my service when I try to see what the value is for inputParentName I get an undefined error. But, when I type something in to the textbox for inputParentName the typed in value displays.

Controller Code:

myapp.controller('AddParentController', function ($scope, addParentService) {
    $scope.addParentService = addParentService;
});

Service Code:

myapp.service('addParentService', function () {
    var vm = this;
    vm.parent = [];

    vm.addParent = function () {
    alert(vm.inputParentName);
    };
});

What can I do differently so I can get the pre-loaded data to register so that my service recognizes the data?

This is just basic code that I'm trying to get working. I realize it isn't pure AngularJS. I am just trying to see how I can get this to work. I will refactor with directives after everything works as I think it should.

@pankajparkar - This is just basic code that I'm trying to get working. I realize it isn't pure AngularJS. I am just trying to see how I can get this to work. I will refactor with directives after everything works as I think it should. — webdad3, May 27 '15 at 14:26
Seems like your jQuery call is changing the field's value "under the radar" from Angular's perspective and this is why this change is not detected. You can pre-populate the field in the controller. — OrenD, May 27 '15 at 14:33
Actually, input IS a directive in AngularJS: https://docs.angularjs.org/api/ng/input If you want to pre-populate the input, you initialize the model. So, set the value of addParentService.inputParentName — jme11, May 27 '15 at 14:34
It wouldn't. The controller is the glue between the model and the view. So that's where you would initialize values on the model. The service is for things that are cross cutting concerns -- things you want to use in lots of places across you app, not specific to a particular view, controller or model. So your service could be used to retrieve data from your backend and share it with multiple controllers for example. — jme11, May 27 '15 at 14:49

score 1 · Answer 1 · answered May 27 '15 at 15:12

1

If you want the initial value to be "something" when the view displays, you can (technically) use ng-init, though the docs tell us expressly NOT to do this.

The only appropriate use of ngInit is for aliasing special properties of ngRepeat, as seen in the demo below. Besides this case, you should use controllers rather than ngInit to initialize values on a scope.

But if you're just trying to test something, ng-init would look like:

<input ng-model="test.val" ng-init="test.val='something'" />

The preferred way though would be to add the value to the controller $scope.

<input ng-model="test.val" />

Then in your controller:

myapp.controller('MyCtrl', function ($scope) {

   $scope.test = {
    val: 'something'
   }

});

answered May 27 '15 at 15:12

jme11

17,134
2
38
48

I figured it out a little differently, but still with a lot of your input. If you want to take how I did it and add it to you answer I will mark yours as the answer (and delete mine). – webdad3 May 27 '15 at 15:19
Glad you got a solution. Keep your answer. Want a challenge? Get rid of the dependence on jQuery. Create your own service for Facebook using the built in $http service and populate your values in your scope from your service! – jme11 May 27 '15 at 15:43
That is my next challenge with AngularJS. Should I just search $http services? – webdad3 May 27 '15 at 16:58
That's where I'd start. I'm making an assumption that you're using some backend to actually connect to FB and then you've been using jQuery's ajax method to retrieve the values from your backend. Angular's $http service behaves a lot like jQuery's $.ajax method, so it should be fairly simple to swap out that code. Later, you may want to look at how you can create your own custom service (injecting $http) to retrieve that information in a way that you can share it across multiple controllers in your app. At some point, you'll want to look at ngResource and connect directly to the FB API. – jme11 May 27 '15 at 17:20

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

@jme11 and This Answer gave me the insight to the following way I figured out how to get this to work:

jQuery code for Facebook logic:

    $("#inputParentName").val(response.name);
    $("#inputParentEmail").val(response.email);
    $("#inputParentBirthday").val(response.birthday);

    angular.element(document.getElementById('inputParentName')).scope().$apply();
    angular.element($('#inputParentName')).scope().setName(response.name);
    angular.element($('#inputParentEmail')).scope().setEmail(response.email);
    angular.element($('#inputParentBirthday')).scope().setBirthday(response.birthday);

My Controller code:

$scope.setName = function (val) {
    addParentService.inputParentName = val;
}

$scope.setEmail = function (val) {
    addParentService.inputParentEmail = val;
}

$scope.setBirthday = function (val) {
    addParentService.inputParentBirthday = val;
}

Service Code:

vm.addParent = function () {
    alert(vm.inputParentName);
    alert(vm.inputParentBirthday);
    alert(vm.inputParentEmail);
    alert(vm.inputParentCellPhone);
    alert(vm.inputParentCarrier);
};

Now when I'm adding my Parent the values pre-populated from Facebook are usable in my service code.

Again - Thanks to jme11 for helping me solve this.

pre-populated form data is undefined in service

2 Answers2