Question

让供应商成为文件（包括代码，名称和许多其他字段）。我有一个组件

export class SuppliersDetails  extends MeteorComponent {
  supplier: any;
  invalidKeys: Object; // array <key> => <error message>

和表格

 <div>
     <input [(ngModel)]="supplier.code" [class.invalid]="invalidKeys['code']" id="code" type="text" class="validate">
     <label for="code" [class.active]="supplier.code || invalidKeys['name']" [attr.data-error]="invalidKeys['code']" >Code</label>
 </div>

允许我编辑它。

我如何重构我的组件/模板，以减轻我的模板？

这里只有1个字段，只处理invalidKeys消息的显示。但是我有8个字段和一些特定的逻辑要添加。这将变得难以理解。

我正在寻找像

这样的东西

<div>
    <input plsDoItAllAndUseThatId='code'></input>
    <label plsDoItAllAndUseThatId='code'>Code</input>
</div>

但我不知道设计，任何想法？

Answer 1

我建议调查dynamic forms，如angular2 docs的cookbook部分所述。这里的关键是将业务逻辑从表单本身中分离出来，例如通过创建：

将包含所有输入属性的问题对象
将创建所有生成所有问题的服务生成特定表单所需的所有问题
一个通用组件，它将循环遍历问题列表并将所有问题属性绑定到输入

Answer 2

这是您可以使用属性指令的好时机。

https://angular.io/docs/ts/latest/guide/attribute-directives.html#!#write-directive

您可以将其写为属性，就像您要执行的操作一样。有了它，你可以操纵指令中的元素，以便在你想要或做任何事情时添加其他属性。

这会让它很漂亮。我是这种东西的粉丝。

如果你有创意，你可以做很多很酷的事情。

重构可能复杂的模板

2 个答案: