AngularJS pass data to form not working

Question

I'm trying to pass some data to a angularjs form with no success. I'm defining a module, calling it in the template and binding the template to a controller. The idea is to pass something to the $scope variable in order to show the existing username as value to the field. The same form is going to be used to add and edit users. In the last case, I'll fetch the user by id and pass his info to the $scope through the myForm variable.

Here's a plunker to make things easier: http://plnkr.co/edit/nAabxgrw4HqLcgrErVxq?p=preview

Template:

<div ng-app="App">
<form ng-controller="TestController" class="form-horizontal" name="myForm" novalidate>
  <div class="form-group" ng-class="{ 'has-error' : myForm.username.$invalid && !form.username.$pristine }">
                        <div class="col-md-6">
                            <label class="control-label no-padding-right" for="username">Nome</label>
                            <input 
                                name="username" 
                                id="username" 
                                ng-model="username" 
                                type="text" 
                                class="form-control" 
                                ng-required="true" />
                            <p ng-show="myForm.username.$invalid && !myForm.username.$pristine" 
                                        class="help-inline no-padding">This field is required</p>
                        </div>
                    </div>
 <p>{{ myForm.username }}</p>
</form>
</div>

Code:

window.angular.module('App', []);
window.angular.module('App').controller('TestController', ['$scope', function ($scope) {
  $scope.myForm = {};
  $scope.myForm.username = 'John Doe';      
}]);

Any help would be awesome.

Just use {{username}} as in plnkr.co/edit/u5L6KKVunGA3quPqCOGL?p=preview — Simon H
– Simon H, Commented Nov 11, 2014 at 14:23
@SimonH Nice. But I need to pass a value to username. How can I do it? — darksoulsong
– darksoulsong, Commented Nov 11, 2014 at 14:28
Change your controller as $scope.username = 'John Doe'; instead $scope.myForm.username = 'John Doe'; — Asik
– Asik, Commented Nov 11, 2014 at 14:43

ashfaq.p · Accepted Answer · 2014-11-11 14:47:44Z

Here is the working solution which I believe is what you want: http://plnkr.co/edit/zH3qeoF26WlrmituvGDd

      <head>
        <link data-require="bootstrap@*" data-semver="3.2.0" rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
        <script data-require="angular.js@*" data-semver="1.3.1" src="//code.angularjs.org/1.3.1/angular.js"></script>
        <link rel="stylesheet" href="style.css" />
        <script src="script.js"></script>
      </head>

      <body>
        <div ng-app="App">
    <form ng-controller="TestController" class="form-horizontal" name="myForm" novalidate>
      <div class="form-group" ng-class="{ 'has-error' : myForm.username.$invalid && !form.username.$pristine }">
        <div class="col-md-6">
            <label class="control-label no-padding-right" for="username">Nome</label>
            <input ng-value="myForm.username"
                name="username" 
                id="username" 
                ng-model="username" 
                type="text" 
                class="form-control" 
                ng-required="true" />
            <p ng-show="myForm.username.$invalid && !myForm.username.$pristine" 
                        class="help-inline no-padding">This field is required</p>
        </div>
    </div>
     <p>{{ username }}</p>
    </form>
    </div>
      </body>

    </html>

sylwester · Accepted Answer · 2014-11-11 14:43:16Z

You input is bind to username ng-model="username"

so in your controller you can set up username by :

 $scope.username = 'John Doe';

Please see demo below

window.angular.module('App', []);
window.angular.module('App').controller('TestController', ['$scope',
  function($scope) {
    $scope.myForm = {};
    $scope.username = 'John Doe';
  }
]);

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet" data-semver="3.2.0" data-require="bootstrap@*" />
<script data-require="bootstrap@*" data-semver="3.2.0" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
<script src="//code.angularjs.org/1.3.1/angular.js" data-semver="1.3.1" data-require="angular.js@*"></script>
<script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>

<body>
  <div ng-app="App">
    <form novalidate="" name="myForm" class="form-horizontal" ng-controller="TestController">
      <div ng-class="{ 'has-error' : myForm.username.$invalid && !form.username.$pristine }" class="form-group">
        <div class="col-md-6">
          <label for="username" class="control-label no-padding-right">Nome</label>
          <input type="text" ng-required="true" class="form-control" ng-model="username" id="username" name="username" />
          <p class="help-inline no-padding" ng-show="myForm.username.$invalid && !myForm.username.$pristine">This field is required</p>
        </div>
      </div>
      <pre>{{ myForm.username |json}}</pre>
    </form>
  </div>
</body>

Collectives™ on Stack Overflow

AngularJS pass data to form not working

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related