重构潜在复杂的模板

让供应商成为文档（包含代码，名称和许多其他字段）。我有一个组件重构潜在复杂的模板

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>

但我没有设计，任何想法的想法？

来源

2016-06-22 ATX

你可以做的事情不多。你可以将它封装在一个组件中，但是使用一个自定义组件作为表单输入字段（使用'[（ngModel）] =“...”'）也不是微不足道的。它需要实现'ControlValueAccessor'，并且它需要可配置以防输入之间有些事情发生变化。 –

我建议按照angular2文档的食谱部分的描述调查dynamic forms。这里的关键是业务逻辑分离出来的形式本身，如通过创建：

一个问题，反对将控制所有的输入性
服务，这将创造一切产生的所有问题通过特定的形式
将遍历的问题的列表并绑定了问题的实质属性输入一个通用组件所需

来源

2016-06-22 18:59:10 bgeo

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

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

就像你在你想要做什么？你可以写为属性。有了这个，你可以操纵指令中的元素来添加其他属性，如果你想要或做任何事情。

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

如果你有创意，你可以用很多很酷的东西。

来源

2016-06-22 20:21:26 ribsies

我喜欢这个解决方案。我有相同的语法来保存相同的语法，我们可以使用这个方法来创建一个文件。遵循我的逻辑，还是我有义务使用oldschool dom元素操作来设置样式和类？（操作ElementRef） – ATX

重构潜在复杂的模板

回答

相关问题