1

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

我在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>
4

2 回答 2

1

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

  1. 它可以重复使用吗？
  2. 表格是否有独特的逻辑？
于 2016-06-16T14:19:05.810 回答
1

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

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

编辑：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>
于 2016-06-16T14:19:12.750 回答