这可能只使用 angular-formly 吗？

Question

所以，我有这个表格，使用 AngularJS here，它基本上让我创建一个购买对象发送到服务器，即它让我 select存储我购买一些物品的地方，设置一个 "date of purchase"（现在只是一个文本字段），然后将这些物品添加到我要发送的对象中。

提交按钮后显示我要发送的模型的外观，显示商店 ID、"datetime" 和一组项目。

我的问题是：有没有办法仅使用 angular-formly 来完成此表单？

出现这个问题是因为我一直在阅读 formly 的文档，但我还没有想出如何让它创建像这个表单那样的动态模型，即，使用可变长度的购买项目数组, 或者如果可能的话。

提前感谢您给我的任何线索来回答这个问题:)

表单代码如下：

(function(){
    var app = angular.module('test', []);
})();

html 页面：

    <!DOCTYPE html>
    <html>

    <head>
      <link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css"/>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.js"></script>
      <script src="inab.js"></script>
      <script src="PurchaseCtrl.js"></script>
    </head>

    <body ng-app="test">
      <div ng-controller="PurchaseCtrl" class="col-md-4">
            <h2>Purchase</h2>
            <div class="panel panel-default">

              <div class="panel-heading">Title</div>

              <div class="panel-body">

                <div class="form-group">
                  <label>Store</label>
                  <select class="form-control" ng-model="model.store">

                    <option ng-repeat="store in stores" value="{{store.id}}">{{store.name}}</option>
                  </select>
                </div>

                <div class="form-group">
                  <label>date-time</label>
                  <input class="form-control" type="text" ng-model="model.datetime"/>
                </div>

                <div ng-repeat="item in items">
                  <div class="form-group">
                    <div class="col-sm-2">
                      <label>{{item.label}}</label>
                    </div>
                    <div class="col-sm-8">
                      <input class="form-control" type="text" ng-model="item.nome" />
                    </div>
                    <div class="col-sm-2">
                      <button type="submit" class="btn btn-alert submit-button col-md-2" ng-click="removeItem()">remove item</button>
                    </div>
                  </div>
                </div>

                <button ng-click="addItem()">Add item</button>
              </div>
            </div>
            <button type="submit" class="btn btn-primary submit-button" ng-click="onSubmit()">Submit</button>
            <pre>{{model | json}}</pre>
          </div>
    </body>

  </html>

控制器：

(function(){
  angular.module('test').controller('PurchaseCtrl', ['$scope', function(scope){

    scope.stores = [{id: 1, name:'Store 1'}, {id: 2, name: 'Store 2'}];

    scope.items = [];

    scope.datetime = '';

    scope.store = '';

    var i = 0;

    scope.model = {
      store: scope.store,
      datetime: scope.datetime,
      items: scope.items
    };

    scope.addItem = function(){
      scope.items.push({label: 'algo' + (i++), nome:''});
    }

    scope.removeItem = function(){
      scope.items.splice(scope.items.length - 1);
    }

    scope.onSubmit = function(){
      console.log(scope.model);
    }
  }]);
})();

Answer 1

正如@Satej 评论的那样，它包含重复的部分。谢谢:)

这可能只使用 angular-formly 吗？

Is this possible using only angular-formly?

javascript

forms

angularjs

angular-formly