Angular JS Forms submit not sending model data

Question

In the following example, message is undefined when I display it in the controller after the event is fired. Why?

<form>
  <input type="text" ng-model="message.Title" />
  <textarea ng-model="message.Content"></textarea>         
  <input type="submit" value="Send Message" ng-click="sendMessage(message)" />
</form>

Controller:

$scope.sendMessage = function(message) {
  console.log(message);
}

My code seems identical to the documentation here except my controller manages the entire "page" not just the form.

Terry · Accepted Answer · 2013-02-21 17:46:07Z

4

Wow nevermind, apparently when you submit with blank values it doesn't even create the object.

answered Feb 21, 2013 at 17:46

Terry

14.2k9 gold badges58 silver badges84 bronze badges

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

Comments

Ben Lesh · Accepted Answer · 2013-02-21 18:32:28Z

4

I see you've found your problem, but I'd like to propose a solution to prevent your problem anyway:

<form name="messageForm" ng-submit="sendMessage(message)">
  <input type="text" ng-model="message.Title" required/>
  <span ng-show="messageForm.title.$error.required && messageForm.title.$dirty">required</span><br/>
  <textarea ng-model="message.Content"></textarea>         
  <input type="submit" value="Send Message" ng-disabled="messageForm.$invalid" />
</form>

The above will make the Title required, display an error message, and disable your submit button if the form isn't valid.

answered Feb 21, 2013 at 18:32

Ben Lesh

109k47 gold badges251 silver badges233 bronze badges

Collectives™ on Stack Overflow

Angular JS Forms submit not sending model data

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