AngularJS pass data to form not working

Question

AngularJS pass data to form not working

891 views Asked by darksoulsong At 11 November 2014 at 14:18

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.

Original Q&A

There are 2 answers

ashfaq.p On 11 November 2014 at 14:47

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:16

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>

TechQA.

AngularJS pass data to form not working

There are 2 answers

Related Questions in JAVASCRIPT

Related Questions in ANGULARJS

Related Questions in ANGULARJS-TEMPLATES

Popular Questions

Popular Tags

Trending Questions