带有验证的数组的角度表单输入答案

【问题标题】：Angular form inputs to array with Validation带有验证的数组的角度表单输入
【发布时间】：2016-02-02 13:59:08
【问题描述】：

Angular js 中是否有一种方法可以将管理器列表（或任何项目）推送到具有 Angular 验证的数组中。我基本上想创建一个数组作为 ng-model 并仍然对其进行验证。这是可能的还是我做错了？

    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>

【问题讨论】：

标签： javascript arrays angularjs-ng-repeat

【解决方案1】：

在你的例子中，除了正则表达式之外，没关系。

看示例代码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>

【讨论】：

谢谢你很有见识一旦我得到测试，我会接受答案。