CODEWITHSUNDEEP
javascriptangularjs
user3561871
user3561871

Reputation: 125

ng-model on textarea doesn't work

I'm having an issue using ng-model. When I look at the object, all the properties empty:

$scope.edit = {
            name: " ",
            gender: " ",
            major: " ",
            gpa: " ",
            act: " ",
            sat: " ",
            toefl: " ",
            primary: " ",
            secondary: " ",
            country: " ",
            summary: " ",
            past: " ",
            media: " "
        };

But when I click submit button all it returns are

enter image description here In the html page

Code: https://plnkr.co/edit/HJlfFVjq0cZWJDCDXSXw?p=preview

Upvotes: 0

Views: 855

Answers (1)

Ahmad Baktash Hayeri
Ahmad Baktash Hayeri

Reputation: 5880

From the plunker (although I couldn't run your code) what is quite obvious is that you are using the same controller PlayerController on two different occasions within your form.

What happens here is that the method updateUser() of the ng-click attribute is bound to a new instance of the controller PlayerController. Therefore creating a new scope, and totally unaware of what changes have been brought to its neighboring namesake controller's scope properties (in this case edit).

<div ng-controller="PlayerController">
   <!-- ISOLATE region -->
   <textarea ng-model="edit.someproperty"></textarea>
</div>
<div ng-controller="PlayerController">
   <!-- Another isolate region unaware of the above -->
   <button ng-click="updateUser(edit)">Update</button>
</div>

Solution

Wrap the whole form of yours within one single ngController directive so that everything within that scope (ngModel directives and the method updateUser) use the same scope properties.

Simple Demo

Note: I've also noticed that you've wrapped the ngControllers within a form which is incorrect. A form in AngularJS imposes a FormController controller object and that controller becomes the immediate parent of your controllers. In fact, the controller that you are creating with ngController is meant to handle the logic for your form and not other way round.

Upvotes: 2

Related Questions