重構潛在複雜的模板

讓供應商成爲文檔（包含代碼，名稱和許多其他字段）。我有一個組件重構潛在複雜的模板

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

重構潛在複雜的模板

回答

相關問題