2014-01-27 67 views
4

我正在構建一個帶有可以使用前綴(http://)或不使用格式的URL字段的Angular表單。採用了棱角分明的默認網址驗證需要的http://,所以我插在下面的正則表達式,這有和沒有前綴接受:對單個輸入(url)禁用角度表單驗證

<input type="text" id="siteAddress" name="siteAddress" ng-model="user.url" ng-pattern="/^(https?:\/\/)?([\dA-Za-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/" required>

這個偉大的工程,但是當我設置類型=「URL」, Angular的驗證會覆蓋我的自定義ng模式。這種形式僅適用於移動用戶,因此type =「url」非常重要,這樣他們才能收到正確的鍵盤,因此他們的移動操作系統不會嘗試自動更正其輸入。

是否可以使用type =「url」而不使用Angular應用其默認驗證,或者是否可以修改Angular的默認驗證以便它不接受url前綴?

謝謝!

+0

看起來像最簡單的解決方案可能是保持輸入字段類型=「文本」,只是添加屬性來禁用拼寫檢查,自動大寫等。 'autocomplete =「off」autocorrect =「off」autocapitalize =「off 「spellcheck =」false「' 它運作良好。唯一的缺點是沒有獲得包含.com按鈕的自定義「url」鍵盤。我會留下這個問題,看看在結束之前是否有人有任何見解。 – idealboy

回答

3

看起來好像沒有官方的API可以這樣做,但是您總是可以覆蓋默認指令或使用優先級更高的指令來更改標準行爲。

例如,angular的input指令從$attributes對象獲取類型,因此您可以刪除此屬性。

directive('ignoreType', function() { 
    return { 
     priority: 500, 
     compile: function(el, attrs) { 
      attrs.$set('type', 
       null,    //to delete type from attributes object 
       false    //to preserve type attribute in DOM 
      ); 
     } 
    } 
}); 

Here is jsfiddle for it

當然,這個解決方案也可能會破壞其他類型屬性指令的行爲,所以請謹慎使用它。

+0

謝謝,這個作品完美!我創建了一個包含我的正則表達式的jsfiddle,用於驗證沒有http的URL:http://jsfiddle.net/spidercoder/2cuQF/。我無法找到任何繞過默認的Angular表單驗證的文檔化解決方案,所以這非常有價值。謝謝你的幫助! – idealboy

0

一個想法是,以測試從該的FormController $ removeControl方法,看看本地URL驗證將熄滅...... http://docs.angularjs.org/api/ng.directive:form.FormController

裏面你的控制器,你會做這樣的事情:

$scope.form.$removeControl('siteAddress'); 

林不知道它會做什麼,因爲我沒有機會測試它,關於這個文件是不完整的...讓我知道如果這個工程請。

希望能給你一些幫助。

+0

我得到這個Angular錯誤:'TypeError:不能調用未定義的方法'$ removeControl'。我嘗試了'$ scope.form。$ removeControl('siteAddress');'以及表單id:'$ scope.loginForm。$ removeControl('siteAddress');'並且得到了同樣的錯誤。不過謝謝你的想法! – idealboy

+0

這是值得一試的...我們應該關注這個方法的更多文檔。 – Fedaykin