AngularJs ng-submit cannot get the value of ng-model

Question

I have this HTML :

<form ng-submit="addComment()">
    <md-input-container flex>
        <label>Shoutout</label>
        <input type="text" ng-model="comment">
    </md-input-container>
</form>

and in my Controller :

$scope.comment = "";

$scope.addComment = function(){
    console.log("Value from input", $scope.comment);
    $scope.comment = "test"
    console.log("New Value", $scope.comment);
}

It works fine when im typing on the input the model is updating and all. But when I press enter I expect the value from the input to be logged on the console. But it seems that it cannot get the updated value from the ng-model.

Chrillewoodz · Accepted Answer · 2015-09-09 10:43:23Z

3

Try passing it as an argument:

<form ng-submit="addComment(comment)">
  <md-input-container flex>
    <label>Shoutout</label>
    <input type="text" ng-model="comment">
  </md-input-container>
</form>

$scope.addComment = function(comment){
  console.log("Value from input", comment);
  $scope.comment = "test";
  console.log("New Value", comment);
}

answered Sep 9, 2015 at 10:43

Chrillewoodz

28.5k23 gold badges102 silver badges189 bronze badges

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

5 Comments

jofftiquez Over a year ago

Nice thanks. 1 question though. How do I make the input empty again?

Chrillewoodz Over a year ago

@GreenFox Just do comment = "";

jofftiquez Over a year ago

Im doing $scope.comment = "" inside the addComment() but it does not work. :(

Chrillewoodz Over a year ago

What if you set it to null?

jofftiquez Over a year ago

It seems that the problem is occuring due to the DOM is loaded before the Javascript because Im populating the views via ng-repeat based on the response from http. I solved it by putting a dynamic id on the input and used jquery to empty the input like $('#comment_'+someid).val('');

Shekhar Khairnar · Accepted Answer · 2015-09-09 10:58:32Z

1

It seems all correct have a look.

angular.module('app', []).controller('MyController', ['$scope',
  function($scope) {

    $scope.comment = "";

    $scope.addComment = function() {
      console.log("Value from input", $scope.comment);
      $scope.comment = "test"
      console.log("New Value", $scope.comment);
    }

  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MyController">
  <form ng-submit="addComment()">
    <md-input-container flex>
      <label>Shoutout</label>
      <input type="text" ng-model="comment">
    </md-input-container>
  </form>
  
  <p>{{"log-->> "+comment}}</p>
<div>

answered Sep 9, 2015 at 10:58

Shekhar Khairnar

2,7013 gold badges29 silver badges46 bronze badges

Collectives™ on Stack Overflow

AngularJs ng-submit cannot get the value of ng-model

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related