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)

score 4 · Accepted Answer · edited May 23 '17 at 12:08

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

How to get data from ngform in angularjs?

1 Answers1