angularjs form submit data empty

Question

Good day to all.

Have a form element

<form name="myForm" ng-submit="subMe()">
  <input type="text" name="name" value="" />
</form>

and

$scope.subMe = function(){
  console.log( $scope.myForm ); // return empty object as {}
}

so, how I can see data in the form? There are many inputs elements will be in the future.

And is the best practice for check valid form in back-end? Do as some like:

var _valid = $http.post();
if ( _valid) {
  if ( createUserSuccess() ){
    showSucceess();
  } else {
    showError();
  }
} else {
  showBadFilledFormElements();
}

Thanks!

how about <form ng-model="myForm" ...? That should add it to the scope — orhanhenrik
– orhanhenrik, Commented Oct 28, 2014 at 21:50

cpk · Accepted Answer · 2015-07-20 19:02:43Z

2

You have no submit input or button, so ng-submit isn't what you would use to view the form data.

initialize an empty object in the scope of your form like so

myApp.controller('formController', function($scope) {
  $scope.formData = {};

  $scope.submitForm = function() {
      //do stuff on submit
  }
});

Then bind the ng-model in your markup like so

<div ng-controller="formController">
   <form name="myForm" ng-submit="submitForm()">
       <input type="text" name="name" ng-model="formData.name" value="" />
       <button type="submit">Submit</button> 
   </form>
    {{formData}}
</div>

You can view it with {{formData}} in the markup, within the scope of formController

EDIT: changed submit form function name to make more sense.

edited Jul 20, 2015 at 19:02

answered Oct 28, 2014 at 22:00

cpk

8091 gold badge7 silver badges20 bronze badges

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

Comments

stevemao · Accepted Answer · 2014-10-28 22:49:32Z

1

Eric Olson's answer is pretty much correct. I just want to add something here. You might wanna checkout ngForm

ngForm

Nestable alias of form directive. HTML does not allow nesting of form elements. It is useful to nest forms, for example if the validity of a sub-group of controls needs to be determined.

Note: the purpose of ngForm is to group controls, but not to be a replacement for the tag with all of its capabilities (e.g. posting to the server, ...).

answered Oct 28, 2014 at 22:49

stevemao

1,5331 gold badge16 silver badges32 bronze badges

Comments

Eric Olson · Accepted Answer · 2014-10-28 22:07:25Z

0

You need to add models to your form's input elements:

<form name="myForm" ng-submit="subMe()">
  <input type="text" name="name" value="" ng-model="myForm.name" />
  <input type="text" name="email" value="" ng-model="myForm.email" />
</form>

and

$scope.subMe = function(){
  console.log( $scope.myForm ); // { name: "abc", email: "[email protected]"}
}

I am not sure I understand the second part of your question, but you will want to create an Angular Service for best practices when submitting your form data to your api.

edited Oct 28, 2014 at 22:07

answered Oct 28, 2014 at 21:56

Eric Olson

2,9851 gold badge22 silver badges22 bronze badges

Collectives™ on Stack Overflow

angularjs form submit data empty

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related