Angular form inputs to array with Validation

Question

Is there a way in angular js to push a list of managers(or any item) to an array with validation in angular. I basically want to create an array as the ng-model and still validate it. Is this possible to do or am i going about it the wrong way?

    var app = angular.module("FormTest",[]);
    app.controller("AppCtrl",  ["$scope", function($scope){

        var appCtrl = this;
        appCtrl.appName = "Form Array";
        $scope.managers = [""];
        $scope.form = {};
        $scope.form.managers = $scope.managers;

        $scope.addManager = function(){

            $scope.managers.push('');
        }

        $scope.removeManager = function(index){

            if($scope.managers.length > 1){

                $scope.managers.splice(index, 1);

            }
        }

    }])

    angular.element(document).ready(function(){
        angular.bootstrap(document.querySelector('html'), ["FormTest"]);
    })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <div ng-controller="AppCtrl as app">
        <h2>{{app.appName}}</h2>
        <div>
            {{form.managers}}
            <div>
                <div>{{managers}}</div>
                <div class="btn btn-primary" ng-click="addManager()">add manager</div>
            </div>
        </div>
        <form novalidate name="form">
            <div class="form-group" ng-repeat="item in managers track by $index">
                <div class="row-fluid">
                    <div class="col-md-5">
                        <input type="text" ng-model="managers[$index]" ng-pattern="/\w{3,}/" required class="form-control">
                    </div>
                    <div class="col-md-1">
                        <div class="btn btn-default">
                            <span class="glyphicon glyphicon-remove-circle" ng-click="removeManager($index)"></span>
                        </div>
                    </div>
                </div>
            </div>

        </form>
    </div>

Stepan Kasyanenko · Accepted Answer · 2016-02-02 05:59:08Z

2

In your example, all right, except for that of the regular expression.

Look at the example code jsfiddle.

<h2>{{app.appName}}</h2>
<div>
  {{form.managers}}
  <div>
    <div>{{managers}}</div>
    <button class="btn btn-primary" ng-click="addManager()">add manager</button>
  </div>
</div>
<form novalidate name="form">
  Form valid={{form.$valid|json}}
  <div class="form-group" ng-repeat="item in managers track by $index">
    <div class="row-fluid">
      <div class="col-md-5">
        <input type="text" ng-model="managers[$index]" name="manager{{$index}}" ng-pattern="/^\w{3,}$/" required class="form-control">
        {{form['manager'+$index].$error}}
      </div>
      <div class="col-md-1">
        <div class="btn btn-default">
          <button class="glyphicon glyphicon-remove-circle" ng-click="removeManager($index)">Remove</button>
        </div>
      </div>
    </div>
  </div>

</form>

answered Feb 2, 2016 at 5:59

Stepan Kasyanenko

3,1761 gold badge17 silver badges23 bronze badges

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

1 Comment

Jesse Over a year ago

Thank you that was very insightful I didn't know you do that with angular, I had thought of using a filter to try and validate it but that seems like it might do the trick. I will accept the answer once I get to test it out.

Collectives™ on Stack Overflow

Angular form inputs to array with Validation

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related