Angular - 使用表單輸入指令時的表單驗證問題

我一直在嘗試構建一個表單輸入指令，它將根據模型和模型屬性生成表單輸入。例如，Angular - 使用表單輸入指令時的表單驗證問題

如果字段名稱和類型是文本，該指令將返回一個輸入HTML控件，
如果字段是一個列表，那麼它會返回一個選擇框等

這些輸入是在視圖中使用ng-repeat生成的。輸入被綁定到範圍中的模型。這工作正常。但是，表單驗證失敗;即如果輸入控件無效，主窗體仍然顯示窗體有效。

我提出了一個簡單的plunkr來說明這個問題 - http://plnkr.co/edit/R3NTJK?p=preview

注：其實我已經嵌套形式，作爲輸入名稱字段也從動態範圍模式產生。

我一直在試圖從過去2天得到這個，這真的讓我瘋狂。

我不知道我是否錯過了一些東西。

我真的很感激，如果有人能幫助我這個。

來源

2013-03-15 Gautham

更新：使用下面的鏈接功能：

link: function linkFn(scope,elem,attr){ 
    var jqLiteWrappedElement = 
     angular.element('<input type="url" name="socialUrl" ng-model="social.url">'); 
    elem.replaceWith(jqLiteWrappedElement); 
    $compile(jqLiteWrappedElement)(scope); 
}

Plunker。

由於我不明白的原因，必須在調用$ compile前執行replaceWith()。如果有人能解釋爲什麼這樣，我們將不勝感激！

UPDATE2：在下面的意見，阿爾喬姆提到，被稱爲邏輯函數之前，DOM必須被修改，所以這也適用：

var myElem = angular.element('some html'); 
var linkFn = $compile(myElem); 
element.replaceWith(myElem); 
linkFn(scope);

原來的答覆：

代替鏈接功能，只需在您的指令中使用模板：

template: '<input type="url" name="socialUrl" ng-model="social.url">'

來源

2013-03-15 16:09:06

感謝您的輸入。但是，我需要基於範圍動態地生成模板，即模板可以是基於範圍中可用的字段類型的輸入文本/廣播/複選框，選擇，日期選擇器等。在這種情況下，我無法對模板字符串進行硬編碼，並需要使用可訪問範圍的鏈接函數來生成它。 – Gautham 2013-03-16 05:00:44

@Gautham，我想出瞭如何使它在鏈接函數中工作，但我不完全明白爲什麼。查看更新的答案。 – 2013-03-16 15:54:44

@MarkRajcok，嗨。感謝您的回答。我遇到類似的問題，您的解決方案正常工作。但我很好奇，你是否知道爲什麼replaceWith必須在$ compile之前調用？ – Artem 2013-04-12 03:35:48

Angular - 使用表單輸入指令時的表單驗證問題

回答

相關問題