角Formly：用户点击动态添加表单域 [英] Angular-Formly : Adding Form fields dynamically on user click

问题描述

我怎么会去的形式加入的能力，使用户可以通过单击添加添加更多的输入字段。这使用角度formly库。

How would I go about adding the capability in the form so that the user can add more input fields by clicking the "Add". This using the angular formly library.

下面是确切的特征的一个例子，但仅使用angularjs完成

Here is an example of the exact feature but done using only angularjs.

添加表单字段动态

推荐答案

下面是你所需要的例子。正如你可以在plunker看到，有一个文本区可动态按钮点击创建。创建的文本域可aalso与删除删除按钮的点击。

See this Plunker

Here is an example of what you need. As you can see in the plunker, there is a TextArea which can be created dynamically on button click. The created TextAreas can aalso be removed with the remove button click.

看到 HTML 在

<div class="col-sm-10">
  <input type="button" class="btn btn-info" ng-click="addNewChoice()" value="ADD QUESTION">
  <div class="col-sm-4">
    <fieldset data-ng-repeat="field in choiceSet.choices track by $index">
      <textarea rows="4" cols="50" ng-model=" choiceSet.choices[$index]"></textarea>
      <button type="button" class="btn btn-default btn-sm" ng-click="removeChoice($index)">
        <span class="glyphicon glyphicon-minus"></span> REMOVE
      </button>
    </fieldset>
  </div>
</div>

和 JS 将如下

var app = angular.module('myApp', []);
app.controller('inspectionController', function($scope, $http) {
  $scope.choiceSet = {
    choices: []
  };
  $scope.quest = {};
  $scope.choiceSet.choices = [];
  $scope.addNewChoice = function() {
    $scope.choiceSet.choices.push('');
  };
  $scope.removeChoice = function(z) {
    $scope.choiceSet.choices.splice(z, 1);
  };
});

这篇关于角Formly：用户点击动态添加表单域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！