創建一個角度指令以更改表單的占位符文本

Question

本質上，這並不是直接的編碼問題……更像是進行此類操作的最佳實踐或最明智的方式。

我有一個帶有按鈕的表單，如果輸入無效，該按鈕應將占位符文本更改為自定義錯誤。 因此，基本上“單擊”應該檢查有效性。

我是否只需將整個表格包圍在指令中，並在單擊按鈕並檢查有效性時遍歷每個字段？ 我的其他解決方案包括為每個輸入創建一個指令，但不包括按鈕，但是在單擊按鈕時通過使用父作用域以某種方式與表單進行交互。

Answer 1

Angular表單設計（即$ validators，$ formatters和$ parsers）處於輸入指令級別。 占位符是輸入級別的屬性。 因此，最低的設計意圖是盡快提供錯誤反饋。

如果較低/粒度級別允許，則可以始終將顯示時序控制在較高級別。 在您的情況下，myform。$ isvalid是一個可用屬性，因為任何表單都獲得了formController。 您可以使用來自表單上name屬性的句柄來訪問它。

在Angular vs. jQuery中，我們處理增強的html或html元素，而不是查找其他元素並對其進行增強。 現在，哪個元素更適合執行您描述的功能？

單獨的輸入元素可以更好地容納大多數數據，即元素上的占位符和$ validator []數組。 您也許可以在此處更改視圖/顏色。

因此，我的建議是在輸入元素上執行此操作。 如果要取悅某些老板/客戶必須在頂部顯示舊樣式錯誤消息，您仍然可以在表單提交中實現此目的。

與在表單元素上放置此邏輯相關的問題：

您最終將進行DOM查找。 您的代碼將更像jQuery，因為您將獲取占位符attr值並將其粘貼到某處。

已根據評論中的問題更新。

如果您要在提交時進行此類驗證，請考慮一下。

哪里可以使用“保存/提交”按鈕？

放置：

在 - 的里面 。

保存/提交按鈕的主要工作是保存實體/資源，即將所有數據發送到資源端點。 通常，提交按鈕位於表單內部。 就像各種表單元素的工作是從用戶那里接受輸入一樣，提交按鈕也要接受說“我完成了。提交此表單”的輸入。 同樣，瀏覽器和其他引擎必須已經完成了表單元素的構造才能提交，因此將其放置在外部會帶來輕微風險，或者理想情況下，您不應該假設超文本文檔中的所有元素都已經真正完成了構造。 但是jQuery / Angular在document.ready（）上引導，因此所有原始元素都存在。 但是指令的處理順序-指令。 請參考$ compile，preLink和postLink循環。 （postLink將有權訪問所有子元素）。

角色/職責划分：

Form指令在myForm。$ error []中維護字段級錯誤。 這種錯誤的組織方式如下所示：$ error.validationType = [control]其中每個控件都有$ name，這是您的上的名稱attr。 您會看到-組織可能不是您想要的方式，即扁平化，但是您可以使用它來查找哪些字段無效。

另外，如果您不介意重復，則可以執行以下操作。

myForm.userName.$valid = {{myForm.userName.$valid}}
//downside is the form have to know all the children input names

現在，您可以選擇一些有關如何將占位符傳達給父母的選項

1）通過在您自己的窗體級別的控制器中定義的父范圍函數，讓您在輸入字段級別的指令告訴占位符文本的窗體范圍。 或2）您可以增強角度模型，以在控件上添加一個名為$ placeholder或$ customError的屬性，並在指令中設置該值。 如下所示：

   var myform = elm.parent().controller('form');
   myform['yourInputName'].*$placeholder* = attr.$get('placeholder');