$scope doesn't picks up string from form input - AngularJS, JS

Question

I am trying to implement Change Password feature in MVC (Rest server) application from the User Control Panel but because of some strange reason I can't scope values from form input.

My html form:

<accordion-group heading="Change password" is-open="changePasswordStatus.open" style="cursor: pointer">
    <div>
        <div>
            <form class="form-horizontal" role="form">
                <form-row model="newPassword" name="New: " size="col-sm-8"></form-row>
                <form-row model="repeatedNewPassword" name="Repeat: " size="col-sm-8"></form-row>
                <form-row model="currentPassword" name="Current: " size="col-sm-8"></form-row>
                <br>
            </form>
        </div>
        <div>
        <button class="btn btn-default btn-sm" ng-click="changePassword()">Save</button>
        <button class="btn btn-warning btn-sm" ng-click="changePasswordStatus.open = !changePasswordStatus.open">Cancel</button>
    </div>
</div>
</accordion-group>

My formRow.html:

<div class="form-group">
    <label for="inputText3" class="col-sm-2 control-label">{{name}}</label>
    <div class="{{size}}">
        <input type="{{type}}" class="form-control" data-ng-model="model">
    </div>
</div>

My formRow.js:

collectionsApp.directive('formRow', function(){
    return {
        restrict: 'E',
        replace: true,
        scope: {
            model: '=',
            name: '@',
            size: '@',
            type: '@'
        },
        templateUrl: '/directives/formRow.html',
        link: function(scope, attrs, element) {

        }
    }
});

My userController:

$scope.changePassword = function() {
    if ($scope.newPassword === $scope.repeatedNewPassword) {
        userService.changePassword($scope.newPassword, $scope.currentPassword);
    } else {
            $scope.alerts.push({
                msg : 'Passwords do not match!'
            })
    }
}

And when I enter values in inputs and place breakpoints and trigger changePassword() in debug i get: enter image description here

If condition has passed with value of true because they are both undefined.

I have just arrived at my internship company this morning... :) I have managed to scope data you said (i have created object with 3 fields and in html i made model="object.field", and in controller i call userService.changePassword($scope.password.new, $scope.password.current), and in debug mode I can see that userService is trying to hit '/user/changePasword' with input values loaded in new, and current but in console I get "cannot read property protocol of undefined". It never sends request to my rest controller. — Papi The Typecaster
– Papi The Typecaster, Commented Aug 28, 2014 at 8:13
@PapiTheTypecaster if this the same or even a new issue, I would recommend putting a plunker together to help triage the issue, but at a quick glance I am wondering if your service is missing some property. Though when angular 2.0 comes they will be making a lot of breaking changes, I recommend using the $resource service if you aren't already for REST calls. — acg
– acg, Commented Aug 28, 2014 at 12:11

acg · Accepted Answer · 2014-08-27 15:27:25Z

3

I believe this may be the case of prototypical inheritance and scope, requiring an object being passed into your scoped parameters. Mind trying to change your parent scope to use an object and bind to the properties and not the primitive values:

$scope.security = {newPassword : '', currentPassword = ''};

then you would use something like this in your attributes:

model="security.newPassword"

Or better yet, not make it confusing with model:

myapp-model="security.newPassword"

or pass in the whole object

myapp-security="security"

edited Aug 27, 2014 at 15:27

answered Aug 27, 2014 at 15:21

acg

9615 silver badges11 bronze badges

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

Comments

corn3lius · Accepted Answer · 2014-08-27 16:24:30Z

1

Working in this plunker template ?

<form ...>
  <form-row model="newPassword" name="New: " size="col-sm-8" required ></form-row>
  <form-row model="repeatedNewPassword" name="Repeat: " size="col-sm-8" required ></form-row>
  <form-row model="currentPassword" name="Current: " size="col-sm-8" required ></form-row>
</form>

edited Aug 27, 2014 at 16:24

answered Aug 27, 2014 at 15:10

corn3lius

5,0053 gold badges33 silver badges37 bronze badges

2 Comments

Papi The Typecaster Over a year ago

Are you sure? ng-model (data-ng-model) is already bonded to model. Take a look at FormRow directive again please... Can you elaborate why you suggest this?

corn3lius Over a year ago

@PapiTheTypecaster you're right it doesn't need ng-model.

Collectives™ on Stack Overflow

$scope doesn't picks up string from form input - AngularJS, JS

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related