Using AngularJS to handle form data without ng-model

Question

Using AngularJS to handle form data without ng-model

I am facing a unique situation that may seem a bit strange. I have a form that needs to edit/update information from different objects, such as services.

My goal is to use ng-model to link input fields to their respective objects, but when the form is submitted, I need to convert Angular's Form object into a formData object for POSTing. Has anyone done this before without tedious looping?

HTML

<form name="Ctrl.form" ng-submit="Ctrl.submit()" ng-controller="MyController as Ctrl">
   <input type="text" name="full_name" ng-model="Ctrl.user.fullName">
   <input type="text" name="cart_total" ng-model="Ctrl.cart.gross_total">
   <input type="city" name="city" ng-model="Ctrl.dropship.city">
</form>

Controller

this.user = User.getData();
this.cart = Cart.get();
this.dropship = User.addressBook.getDropShip();

this.submit = function() {
   // transform this.form into formData
}

Does this all make sense? Am I overlooking something?

Thank you! Sincerely

Edit: The form gathers information from multiple objects, but not every property can be POSTed. I hope this clarifies things.

javascript angularjs

Answer 1

Answer №1

To streamline your form submission process, ensure that the user object is linked to the input fields and then simply pass it to the submit function when needed:

HTML

<form name="Ctrl.form" ng-submit="Ctrl.submit(Ctrl.user)" ng-controller="MyController as Ctrl">
   <input type="text" name="full_name" ng-model="Ctrl.user.fullName">
</form>

Controller

this.user = User.fetchData();
this.submit = function(user) {
     $http({ method:'POST', url: 'AddUser', data: user })
        .success(function() {
             // Handle success response
        });       
}

Answer 2

To streamline your form submission process, ensure that the user object is linked to the input fields and then simply pass it to the submit function when needed:

HTML

<form name="Ctrl.form" ng-submit="Ctrl.submit(Ctrl.user)" ng-controller="MyController as Ctrl">
   <input type="text" name="full_name" ng-model="Ctrl.user.fullName">
</form>

Controller

this.user = User.fetchData();
this.submit = function(user) {
     $http({ method:'POST', url: 'AddUser', data: user })
        .success(function() {
             // Handle success response
        });       
}

Answer 3

Answer №2

When passing an object as a parameter to a JavaScript function, it is passed by reference rather than being copied. Therefore, any changes made to the object within the function will affect the original object's address in memory, allowing for reusability of the service across multiple views.

Answer 4

When passing an object as a parameter to a JavaScript function, it is passed by reference rather than being copied. Therefore, any changes made to the object within the function will affect the original object's address in memory, allowing for reusability of the service across multiple views.

Using AngularJS to handle form data without ng-model

Answer №1

Answer №2

Similar questions

Checking User's Admin Permissions with AngularJS Service

Send data from an AJAX request to a Laravel controller

Switch between divs based on the current selection

Posting several pictures with Protractor

Avoiding the storage of POST data in JSON format

What is the method for selecting a check box in AngularJS?

Simulating Cordova plugin functionality during unit testing

PhantomJS fails to trigger function within page.evaluate

Learn how to retrieve the value of an associated field at a specific index by utilizing a combo box in JavaScript when receiving a JSON response

Unable to loop through using ngFor

Countdown Clock in JavaScript for Automatic Logout

Utilizing HTML5/JavaScript to send a text message from a mobile device

Error message: Node: TypeError - Attempted to access the 'sort' property of an undefined variable while using findOneAndUpdate() within a find() operation

Error: Unable to access the 'version' property of null

Javascript involved in the process of CSS Background-Images loading after HTML Images

AutoComplete issues a warning in red when the value assigned to the useState hook it is associated with is altered

Navigating Crossroadsjs Routing: A Beginner's Guide

Is there a way to transform a six-digit input into a date format using vue/JavaScript?

Creating a ListView in React Native and utilizing the CloneWithRow method with an object instead of an

Export multiple variables at once