How to get data from ngform in angularjs?

Question

HTML:

<div ng-controller="TestController" >
    <form name="test_form" ng-submit="submit()">
        <input type="text" name="some_name" ng-model="form_data.some_name" required>

        <ng-form ng-repeat="key in keys" name="keyForm">
            <input type="text" name="data_input" ng-model="form_data.data_input" required>
        </ng-form>  

        <a ng-click="addKey()">NEW KEY</a>
    </form>
</div>

JS:

app.controller('TestController', function TestController($scope){

    $scope.keys = [];

    $scope.addKey = function() {
        $scope.keys.push({});
    }

    $scope.submit = function() {
        console.log($scope);
    }

});

In submit function I can get the value of "some_name" input:

$scope.submit = function() {
    console.log($scope.form_data.some_name);
}

But I can't get the values of "data_input" inputs (they are inside ngform tag). How to do that? (ngform tag is using for ability to validate each new added input separately)

Community · Accepted Answer · 2017-05-23 12:08:32Z

4

Each input inside the ng-repeat needs its own unique ng-model property -- they all can't use form_data.data_input. Here is one way to solve your problem:

<ng-form ng-repeat="key in keys" name="keyForm">
    <input type="text" name="data_input" ng-model="key.data" required>
</ng-form> 

$scope.addKey = function () {
    $scope.keys.push({ data: ''});
}

Fiddle.

See also https://stackoverflow.com/a/14379763/215945

edited May 23, 2017 at 12:08

CommunityBot

11 silver badge

answered Jan 29, 2013 at 16:54

Mark Rajcok

365k114 gold badges500 silver badges494 bronze badges

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

Collectives™ on Stack Overflow

How to get data from ngform in angularjs?

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related