AngularJs Serialize form data without using ngModel

Question

Before I continue to my question, I know ho to get form data inside AngularJs using ngModel, but it's giving some problems since everytime users interact with the form it will run the digest cycle, which can cause some performance problems in some areas of my application.

I know I can have "some" control over this by using ngModelOption, but it's not something simple to use, since I would need to apply it for each ngModel inside the form. At least I don't know another way to go over this situation.

Basically what I need is to have a simple form, doesn't need to update anything immediately (think about a login form, user registration, for example, where we just need to collect the data and send to the database).

As simple as this:

<form name="loginForm" novalidate ng-submit="loginForm.$valid && vm.login()">
    <input type="email" name="email" placeholder="E-mail" required />
    <input type="password" name="password" placeholder="Password" required />
    <button>Login</button>
</form>

But without all the events used inside AngularJs, which will fire the digestCycle, go over other areas, etc..

Note: I can just use AngularJs (or pure JS) to do this.

then how will you validate your form? try writing jQuery for those! — Aravind
– Aravind, Commented Dec 9, 2016 at 2:05

Searching · Accepted Answer · 2016-12-09 00:16:47Z

1

If you are allowed to use jQuery (not just jqLite). Then you can do this to serialize a form

html

<div ng-controller="MyCtrl">

    <form id="loginForm" name="loginForm" novalidate ng-submit="loginForm.$valid && vm.login()">
        <input type="email" name="email" placeholder="E-mail" required />
        <input type="password" name="password" placeholder="Password" required />
        <button type='button' ng-click="LogIn()">Login</button>
    </form>

</div>

script

angular.module('myApp', []).controller('MyCtrl', function($scope) {
    $scope.LogIn = function()
    console.log(angular.element('#loginForm').serialize());//Check
});

answered Dec 9, 2016 at 0:16

Searching

2,2791 gold badge17 silver badges28 bronze badges

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

2 Comments

celsomtrindade Over a year ago

isn't it possible using just jqLite?

Searching Over a year ago

I don't think .serialize() is available in the lite version.. but worth a shot..

Collectives™ on Stack Overflow

AngularJs Serialize form data without using ngModel

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related