using ng-model on the form element to create a form array object?

[rlrh...@gmail.com]

Is it possible to use the ng-model on the form element and automatically generate an array of form inputs when submitted?

This is what I want to have happen (assume I have the ng-app and ng-controller tags already in the html and the proper controller function declared and an array called "contacts" I would like to add the form data to):

index.html:

 ...

<form ng-model = 'addData'>

     <input ng-model = 'name' />

     <input ng-model = 'phone' />

     <button ng-submit = 'addContact()' />

</form>

controller.js:

$scope.addContact = function () {

     $scope.contacts.push ($scope.addData);

     

The ideal would be if this would add a key:value array to the existing array like this: {"[ng-model descriptor from input field]":"[input from form]", "[ng-model descriptor from input field]":"[input from form]"}.  For example, if the user inputs "John" and "(800) 555-1212" it would automatically generate a form model object like this: {"name":"John", "phone":"(800) 555-1212"}

If not already possible, what would be the best alternative.  As it is, I currently have code like this:

controller.js:

$scope.addContact = function () {

     var name = $scope.name;

     var phone = $scope.phone;

     var contact = {"name":name,"phone":phone};

which is not very handy when I have a large number of input fields within the form.  Also, it requires me to hard code the keys separate from the input fields.  Lastly, it makes for tedious and error prone future changes to the form, especially if we add or delete inputs.

Is there a way to make this work?  If not, what is there a better way of doing it than the tedious way I am doing it now?

[Getulio Romão Campos Junior]

Why don´t you do something like

$scope.contact = {};

$scope.contact.name = "name"

$scope.contact.phone = "phone"

then your ng-model would be ng-model="contact.name"

that way you can submit contact and it will have all your form values.

Regards,

Getulio Junior

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en.
 
 

[Dmitry]

Hi rlrhett

you can see how I manage to convert form into array here: http://jsfiddle.net/KQy3z/


I have opposite problem - how to restore values in the dropdown from the form array.

Hope this helps

[Will Kriski]

I haven't found a simple form submit jsfiddle. If anyone can post the most efficient way to submit form values to controller function please post! 

W

[Will Kriski]

I have a simple jsfiddle to submit a form to the controller now http://jsfiddle.net/willkriski/yQs8z/34/

Will