重构潜在的复杂模板

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>

允许我对其进行编辑。

我如何重构我的 component/template 来简化我的模板？

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

我正在寻找类似

的内容

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

但是我对设计一无所知，有什么想法吗？

Answer 1

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

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

Answer 2

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

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

你可以像在你想做的事情中那样把它写成一个属性。有了它，您可以在指令中操作元素以根据需要或执行任何操作来添加其他属性。

那会让它变得非常光滑。我是这类东西的粉丝。

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

重构潜在的复杂模板

Refactoring potentially complex template

meteor

angular2-forms

angular2-template

angular