form value not showing when using ng-model angularjs

Question

I got a form for editing products, the value is showing in the inspector, however not in the form. They do show when I remove ng-model from my code.

In this line the value shows in the inspect element, but not in the form:

<input type="text" class="form-control" placeholder="Product naam" 
value="{{product.title}}" ng-model="formData.title"/>

In this line the value shows in the inspect element, and in the form:

<input type="text" class="form-control" placeholder="Product naam" 
value="{{product.title}}"/>

However I need ng-model to pass the data.

Any suggestions?

Renan Ferreira · Accepted Answer · 2015-12-15 13:38:42Z

8

You don't need the value property in your input tag. The ng-model will already do the binding for you. If you define formData.title in your controller, it will reflect on the value of your input.

The same way, if the user changes the value of the input, it will reflect on the value declared in your controller.

This is the famous Two-way Data Binding of AngularJS. One awesome and dangerous feature of the framework

Take a look at this Fiddle:

http://jsfiddle.net/relferreira/kLcqwuqf/

HTML:

<div ng-app="app">

  <div ng-controller="MainController">
    <input type="text" data-ng-model="test">
  </div>

</div>

JS:

angular.module('app', []);

angular.module('app')
    .controller('MainController', mainController)

mainController.$inject = ['$scope'];
function mainController($scope){

  $scope.test = 'value of the input'

}

edited Dec 15, 2015 at 13:38

answered Dec 15, 2015 at 13:08

Renan Ferreira

2,1603 gold badges21 silver badges31 bronze badges

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

3 Comments

dreamweiver Over a year ago

@NickAudenaerde : if you have found your solution can you close this question.

Renan Ferreira Over a year ago

@NickAudenaerde if it was useful, mark it as the answer. It is not for the points, but to show others that it is the solution for the problem.

Akhilesh Kumar Over a year ago

@RenanFerreira : For example , data-ng-model = "formdata.test" then how we will achieve this ?

Omar Ali · Accepted Answer · 2017-01-29 16:39:51Z

0

If data-ng-model="form.test" then how you will populate its value in input box. Just modifying answer of Renan so that it will help you out to understand the solution more easily.

    angular.module('app', []);

    angular.module('app')
      .controller('MainController', mainController)

     mainController.$inject = ['$scope'];

    function mainController($scope) {
      $scope.form = {};
      $scope.form.test = 'value of the input'

    }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">

  <div ng-controller="MainController">
    <input type="text" data-ng-model="form.test">
  </div>

</div>

edited Jan 29, 2017 at 16:39

Omar Ali

8,6274 gold badges35 silver badges58 bronze badges

answered Jul 23, 2016 at 9:22

Akhilesh Kumar

9292 gold badges16 silver badges30 bronze badges

Collectives™ on Stack Overflow

form value not showing when using ng-model angularjs

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related