Question

我创建了这个jsbin，其中我有fieldGroup个字段。有一个名为AddRow的按钮，在推送时，我正在尝试动态添加另一个字段到fieldGroup。

Formly可以实现吗？这个例子是我在解决方案中如何工作的简化版本。我将从Rest调用中获取我需要的各种字段类型的列表。无论从此调用返回什么，都需要添加到fieldGroup中的字段。从小开始...我只是想尝试根据按钮点击添加一个字段。

Answer 1

您的错误是尝试推送字符串而不是对象。请参阅更正的JSBin：http://jsbin.com/weyowu/edit?html,js,output

以更高级的方式，您可以制作一个重复部分（自定义模板）来动态添加/删除表单的各个部分：

查看更多高级用法：http://angular-formly.com/#/example/advanced/repeating-section

参见示例代码段：

/* global angular */
(function() {
  console.clear();

  'use strict';

  var app = angular.module('formlyExample', ['formly', 'formlyBootstrap'], function config(formlyConfigProvider) {
    var unique = 1;
    formlyConfigProvider.setType({
      name: 'repeatSection',
      templateUrl: 'repeatSection.html',
      controller: function($scope) {
        $scope.formOptions = {
          formState: $scope.formState
        };
        $scope.addNew = addNew;

        $scope.copyFields = copyFields;


        function copyFields(fields) {
          fields = angular.copy(fields);
          addRandomIds(fields);
          return fields;
        }

        function addNew() {
          $scope.model[$scope.options.key] = $scope.model[$scope.options.key] || [];
          var repeatsection = $scope.model[$scope.options.key];
          var lastSection = repeatsection[repeatsection.length - 1];
          var newsection = {};
          if (lastSection) {
            newsection = angular.copy(lastSection);
          }
          repeatsection.push(newsection);
        }

        function addRandomIds(fields) {
          unique++;
          angular.forEach(fields, function(field, index) {
            if (field.fieldGroup) {
              addRandomIds(field.fieldGroup);
              return; // fieldGroups don't need an ID
            }

            if (field.templateOptions && field.templateOptions.fields) {
              addRandomIds(field.templateOptions.fields);
            }

            field.id = field.id || (field.key + '_' + index + '_' + unique + getRandomInt(0, 9999));
          });
        }

        function getRandomInt(min, max) {
          return Math.floor(Math.random() * (max - min)) + min;
        }
      }
    });
  });


  app.controller('MainCtrl', function MainCtrl(formlyVersion) {
    var vm = this;
    // funcation assignment
    vm.onSubmit = onSubmit;

    // variable assignment
    vm.author = { // optionally fill in your info below :-)
      name: 'Joe Zhou',
      url: 'https://plus.google.com/u/0/111062476999618400219/posts' // a link to your twitter/github/blog/whatever
    };
    vm.exampleTitle = 'Repeating Section'; // add this
    vm.env = {
      angularVersion: angular.version.full,
      formlyVersion: formlyVersion
    };
    vm.options = {};

    init();

    vm.originalFields = angular.copy(vm.fields);

    // function definition
    function onSubmit() {
      alert(JSON.stringify(vm.model), null, 2);
    }


    function init() {
      vm.model = {
        keys: [{}, ]
      };

      vm.fields = [{
        type: 'repeatSection',
        key: 'keys',
        templateOptions: {
          btnText: 'Add another Field',
          fields: [{
            key: 'key1',
            type: 'input',
            templateOptions: {
              label: 'A Field'
            }
          }]
        }
      }];
    }
  });

})();

<!DOCTYPE html>
<html>

<head>
  <!-- Twitter bootstrap -->
  <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">

  <!-- apiCheck is used by formly to validate its api -->
  <script src="//rawgit.com/kentcdodds/apiCheck.js/master/dist/api-check.js"></script>
  <!-- This is the latest version of angular (at the time this template was created) -->
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>

  <!-- This is the current state of master for formly core. -->
  <script src="https://rawgit.com/formly-js/angular-formly/latest/dist/formly.js"></script>
  <!-- This is the current state of master for the bootstrap templates -->
  <script src="//rawgit.com/formly-js/angular-formly-templates-bootstrap/master/dist/angular-formly-templates-bootstrap.js"></script>

  <title>Angular Formly Example</title>
</head>

<body ng-app="formlyExample" ng-controller="MainCtrl as vm">
  <div>
    <h1>angular-formly example: {{vm.exampleTitle}}</h1>
    <div>
      This demonstrates using <code>formly-form</code> inside of a template in order to accomplish repeating fields. It also uses <code>formly-field</code> inside of a template in order to accomplish an advanced layout.
    </div>
    <hr />
    <form ng-submit="vm.onSubmit()" novalidate>
      <formly-form model="vm.model" fields="vm.fields" form="vm.form" options="vm.options">
        <button type="submit" class="btn btn-primary submit-button" ng-disabled="vm.form.$invalid">Submit</button>
      </formly-form>
    </form>
    <hr />
    <h2>Model</h2>
    <pre>{{vm.model | json}}</pre>
    <h2>Fields <small>(note, functions are not shown)</small></h2>
    <pre>{{vm.originalFields | json}}</pre>
    <h2>Form</h2>
    <pre>{{vm.form | json}}</pre>
  </div>

  <div style="margin-top:30px">
    <small>
        This is an example for the
        <a href="https://formly-js.github.io/angular-formly">angular-formly</a>
        project made with ♥ by
        <strong>
          <span ng-if="!vm.author.name || !vm.author.url">
            {{vm.author.name || 'anonymous'}}
          </span>
          <a ng-if="vm.author.url" ng-href="{{::vm.author.url}}">
            {{vm.author.name}}
          </a>
        </strong>
        <br />
        This example is running angular version "{{vm.env.angularVersion}}" and formly version "{{vm.env.formlyVersion}}"
      </small>
  </div>

  <script type="text/ng-template" id="repeatSection.html">
    <div>
      <!--loop through each element in model array-->
      <div class="{{hideRepeat}}">
        <div class="repeatsection" ng-repeat="element in model[options.key]" ng-init="fields = copyFields(to.fields)">
          <formly-form fields="fields" model="element" form="form">
          </formly-form>
          <div style="margin-bottom:20px;">
            <button type="button" class="btn btn-sm btn-danger" ng-click="model[options.key].splice($index, 1)">
              Remove
            </button>
          </div>
          <hr>
        </div>
        <p class="AddNewButton">
          <button type="button" class="btn btn-primary" ng-click="addNew()">{{to.btnText}}</button>
        </p>
      </div>
  </script>
</body>

</html>

向fieldGroup动态添加字段

1 个答案: