Question

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

我已经在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

如果您对这两个问题标记为“是”，那么您应该构建一个组件：

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

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组件

2 个答案: