Angular get form elements

Question

I am trying to get element name and class from a form that is passed on to a function. How can i do that?

Html side.

   <form name="test">
    <div>
         <input type="text" class="test1" name="test2"/>
    </div>
    <div>
         <input type="text" class="test3" name="test4"/>
    </div>
    </form>
    <div>
         <input type="button" data-ng-click="save(test)" />
    </div>

and Javascript side

$scope.save = function(form){
   for(how many elements are there)
       (get elements values)
}

how can I do that, can it even be done like that? My purpose is to change class and some other attributes when it's necessary.

See [this post](http://stackoverflow.com/q/15877212/2013981) — rGil, Jul 09 '13 at 12:54

Mark Rhodes · Answer 1 · 2016-11-10T21:42:35.953

4

You can access the form directly from $scope using its name, i.e. $scope.test, and the elements from the form, e.g. $scope.test.test2.

However, if you want to loop through the elements without having to know their individual names you can do something like:

angular.forEach($scope.test, function (element, name) {
    if (!name.startsWith('$')) {
        // element is a form element!
    }
});

edited Nov 10 '16 at 21:42

answered Mar 17 '16 at 23:54

Mark Rhodes

10,049
4
48
51

`if (!name.startsWith('$') {` should read `if (!name.startsWith('$')) {` (missing `)` to close off the condition). – notacouch Nov 10 '16 at 19:50
Updated it. Thanks. – Mark Rhodes Nov 10 '16 at 21:43

score 3 · Answer 2 · answered Jul 09 '13 at 12:57

I'm relatively new to AngularJS, but I am going to make a solid attempt to answer to test my knowledge and hopefully help you.

So in your form, on each of your elements you should use a ng-model. For example, here is a form that may collect a users first and last name:

 <form name="test">
<div>
     <input type="text" class="test1" name="test2" data-ng-model="user.name/>
</div>
<div>
     <input type="text" class="test3" name="test4" data-ng-model="user.last/>
</div>
</form>
<div>
     <input type="button" data-ng-click="save(test)" />
</div>

This will allow you to access the data in your form through $scope.user.

Now for changing classes and attributes, I'm not sure what rules dictate a class/attribute change on your form, but you could use the ng-dirty class as a "flag" to watch for when the user makes a change. Some more information here as to what exactly you are trying to accomplish would be helpful.

I need to change class fields to display an error, I was hoping that I can loop through input fields after save button is pressed and display all invalid fields. At the moment I have used IF's to do that, but I would like to do that through for loop. — Kapaacius, Jul 09 '13 at 13:36
@Kapaacius It sounds like you're doing form validation, which Angular has built in: http://docs.angularjs.org/guide/forms. It's a little complicated, but all the pieces are there. — Mike Robinson, Jul 09 '13 at 15:38

yanhan · Answer 3 · 2013-07-09T15:55:20.887

A common piece of advice I've seen for angular.js is that, you should only do DOM manipulation in directives, so you should definitely consider doing it according to Anthony's answer, that is, using ng-model.

Go down below to see a way to do it more properly using directives.

But if you insist on doing it in the controller, here is a jsfidle that shows you how you can approach it:

http://jsfiddle.net/3BBbc/2/

HTML:

<body ng-app="myApp">
    <div ng-controller="MyCtrl">
        <form id="test">
            <div>
                <input type="text" class="test1" name="test2" />
            </div>
            <div>
                <input type="text" class="test3" name="test4" />
            </div>
        </form>
        <div>
            <input type="button" ng-click="save('test')" value="submit" />
        </div>
    </div>
</body>

JavaScript:

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
    $scope.save = function (formId) {
        $('#' + formId).find('input').each(function (idx, input) {
            // Do your DOM manipulation here
            console.log($(input).val());
        });
    };
}

And here is the jsfiddle showing you how to do it with directives. It's a bit more complicated though...:

http://jsfiddle.net/3BBbc/5/

You could always just go through the **scope.** fields to figure out the input fields. — Kirstein, Aug 19 '13 at 07:31

score 3 · Answer 4 · edited Aug 02 '17 at 23:47

I am trying to get element name and class from a form that is passed on to a function. How can i do that?

Your pseudocode is on the right track:

$scope.save = function( formName ) {
    angular.forEach( $scope[ formName ], function( field, fieldName ) {

        // Ignore Angular properties; we only want form fields
        if( fieldName[ 0 ] === '$' ) {
            return;
        }

        // "fieldName" contains the name of the field

        // Get the value
        var fieldValue = field.$viewValue;
    } );
}

My purpose is to change class and some other attributes when it's necessary.

To do that, you can get the field elements, with the Angular element wrapper:

// Get the field element, as an Angular element
var fieldElement = angular.element( document.querySelector( '[name="' + fieldName + '"]' ) );

You can then use various jqLite methods on these elements. For instance, to set the element's class (overwriting the existing class), you can use the attr method:

// Replace existing class with "new-class"
fieldElement.attr( 'class', 'new-class' );

Thank you so much for this. Works like a charm :D – Rh Jov May 15 '20 at 05:38 — Rh Jov, May 15 '20 at 05:38

Angular get form elements

4 Answers4

Linked