Form angularjs how to show current status while adding ng-model

Question

I have a form in my html page:

<div id=update>
        <form class="form-inline" ng-submit="updateCompany(company.companyId,company.companyName,company.newPassword,company.newEmail)" ng-show="updateForm">
                <h3>Update Company</h3>
            <div class="form-group">

                <input type="text"
                    class="form-control" id="companyId"  value={{company.companyId}}  readonly/>
            </div>

            <div class="form-group">

                <input type="text"
                    class="form-control" id="companyName"
                     value={{company.companyName}} readonly/>

            </div>
            <div class="form-group">

                <input type="text"
                    class="form-control" id="companyPassword"
                     placeholder="Enter New Password" ng-model="company.newPassword"/>

            </div>
            <div class="form-group">

                <input type="email"
                    class="form-control" id="companyEmail" placeholder="Enter New Email"
                    ng-model="company.newEmail" />
                    <button type="submit" class="btn btn-default">UPDATE</button>
            </div>
        </form>
</div>

I would like to show the current company values(id,name,password,email), in the text fields, than give the user option to change the password and the email and send all the parameters when I submit the form.

The problem is when I put the ng-model on the text field, the current value disappears. I need a fix for that!!!

In the first two fields I see the value now because I don't have the ng-model on them, once I put ng-model it disappear.

Either use ng-init or define some ng-model for those fields and set them to whatever you want to display. — yBrodsky, May 13 '16 at 16:24
Possible duplicate of [AngularJS - Value attribute on an input text box is ignored when there is a ng-model used?](http://stackoverflow.com/questions/10610282/angularjs-value-attribute-on-an-input-text-box-is-ignored-when-there-is-a-ng-m) — Saad, May 13 '16 at 16:27
I successfuly atached my data to the $scope.something in my controller and than i can see it in the text fields with ng-model, now when the user change those arguments i want to send them as parameters with submit="", can anyone help me with that? — Asaf.e, May 13 '16 at 16:34
set the $scope.company object in the controller to an empty object or current value. Depending if your getting the company from the backend, then the object equal to response data. If just new from form then set to empty object. — alphapilgrim, May 13 '16 at 17:10

score 0 · Accepted Answer · answered May 13 '16 at 17:03

In your controller just attach the company data to scope like this:

$scope.company = yourcompanydata

And as for submitting the data, you don't have to list all the parameters in your html. In your html just leave:

ng-submit="updateCompany()"

And in your controller:

$scope.updateCompany = function(){
  // your submitting logic here and all the company data will
  // be available under $scope.company
  // including the new password and email entered by the user

  // so your submitting logic could look something like this:
  submitCompanyData($scope.company.companyId, $scope.company.newPassword,...)
}

score 0 · Answer 2 · answered May 13 '16 at 17:20

Here is a simple version codepen to get you started, depending what you'd like to do with data afterwords. I can update as needed.

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

function ExampleController() {
  var vm = this;
  vm.company = {};
  vm.info = info;

  function info(info) {
    console.log(info);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app='app'>
  <div class="container" ng-controller="ExampleController as vm">
    <form novalidate>
      <input type="text" ng-model="vm.company.name" required/>
      <input type="email" ng-model="vm.company.email" required/>
      <input type="submit" ng-click="vm.info(vm.company)" value="Submit" />
    </form>
    {{vm.company| json}}
  </div>
</body>

Form angularjs how to show current status while adding ng-model

2 Answers2