AngularJS 表单组件

Question

我有一个包含不同字段的表单：输入、select、select 多个、按钮。我想知道为这个表单创建一个组件是否是一个好主意（并且实际上可行），这个组件就像一个容器，可以包含所有类型的表单字段（输入、select、按钮、等等...).

我已经在 plunker 上放了一个代码示例，我想做的是为表单创建一个组件，我可以在其中插入我想要的其他组件（按钮、输入、等..).

<!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>

Answer 1

如果您对这两个问题标记"Yes"，那么您应该构建一个组件：

是否可以重复使用？
表格是否有独特的逻辑？

Answer 2

如果您打算在代码的其他部分重用该表单，我认为将其创建为一个组件是个好主意。

否则，这只是一个偏好问题。有时将大部分代码分成不同的文件会很好。

编辑：Plunker 示例 https://plnkr.co/edit/kyt9Q6L01r06dJXLDQZH?p=preview

<body ng-controller="MyCtrl">
  <div class="container">
    <my-form></my-form>
  </div>
</body>

编辑 2：使用将对象作为属性传递给表单的示例更新了 Plunker

<body ng-controller="MyCtrl">
  <div class="container">
    <my-form inputlabels="inputs1"></my-form>
    <my-form inputlabels="inputs2"></my-form>
  </div>
</body>

AngularJS 表单组件

AngularJS component for form

angularjs

angularjs-components