使用 Angular JS 组件创建表单容器答案

【问题标题】：Create a form container with Angular JS component使用 Angular JS 组件创建表单容器
【发布时间】：2016-06-17 07:51:26
【问题描述】：

我正在使用 Angular JS 1.5.6，我只想使用组件而不是指令。

我在我的应用程序中使用一个表单有超过 5 个视图。表单的样式在所有视图中完全相同，只是表单的内容发生了变化。我已经制作了组件（输入、按钮等），我想为表单创建一个组件，它就像一个容器组件，我可以在其中放置不同的组件。在视图 A 中，表单将包含 1 个按钮和 1 个输入，在视图 B 中，表单将包含 2 个按钮和 2 个输入，等等......但我不知道是否可以做到以及如何做到这一点。我有plnkered这个。我想为表单创建一个组件。

<!DOCTYPE html>
<html ng-app="MyApp">

<head>
  <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.6/angular.min.js"></script>
  <script src="script.js"></script>
  <script src="myInput.js"></script>
  <script src="myButton.js"></script>
</head>

<body ng-controller="MyCtrl">
  <div class="container">
    <h2>My form</h2>
    <form role="form">
      <my-input label="Firstname"></my-input>
      <my-input label="Lastname"></my-input>
      <my-button label="Submit"></my-button>
    </form>
  </div>
</body>

</html>

【问题讨论】：

标签： javascript angularjs forms

【解决方案1】：

您的表单容器中有两个基本问题需要解决：

表单的动态模板
Handle peak 应该在您的组件之外运行。

我解决了两个问题

通过 attrs 属性读取模板
将处理函数作为绑定属性传递

表单组件的代码：

  angular.module('MyApp').component('myForm', {
    templateUrl: function($element, $attrs) {
      return $attrs.template; // read template file from component attribute
    },
    controller: MyFormController,
    bindings: {
      label: '@',
      summitHandler: '&' // call to function outside of component via this property
    }
  });

在MyFormController中，我们需要通过绑定属性调用summitHandler函数来处理峰会事件：

function MyFormController($scope, $element, $attrs) {
      var ctrl = this;
      ctrl.summitForm = function(data) {
        // call handler with data summited
        var handler = ctrl.summitHandler();
        handler(data);
      }
}

这就是我们的表单容器组件。

现在您可以通过以下方式添加我的表单：

<my-form label="Personal Info" template="myForm.html" summit-handler="ctrl.myFormHandler"></my-form>

属性 ctrl.myFormHandler 将是 myCtl 中的函数处理事件：

ctrl.myFormHandler = function(data){
    console.log('receive test summit:' + data);
    ctrl.dataReceived = data;
}

See it run here in Plunk.

在年龄字段中输入，您可以看到它将被传递到表单之外。根据需要使用更多功能对其进行扩展。

【讨论】：

【解决方案2】：

看看这个项目：

http://kelp404.github.io/angular-form-builder/

如果您想自己实现它，您需要动态创建一个模板并在将其注入 DOM 之前对其进行编译。这个项目很有用：

https://github.com/incuna/angular-bind-html-compile

它是指令，但它会为您注入和编译您的表单元素（组件或指令）：

<div bind-html-compile="formElements.input1"></div>

【讨论】：