「假」提交中的角度表單驗證

我在頁面上有一個表單，其中有2個按鈕。一個觸發一個函數來計算價格，另一個觸發器是表單的真實提交。「假」提交中的角度表單驗證

這是一個簡單的例子：

<form novalidate name="formStep1"> 
    <select ng-model="address" required> 
    <option></option> 
    <option></option> 
    </select> 

    <input type="text" ng-model="weight" /> 

    <label>{{price}}</label> 

    <button ng-click="getPrice()" /> 
    <button value="submit"/> 

</form>

我需要觸發像$錯誤所有驗證和$提交，因爲我需要的功能時，把納克級的形式的選擇和輸入標籤所有的輸入與文字。

謝謝。

來源

2015-10-19 Roger Nomen

在你form你有兩個領域不具備name小號屬性分配給它。要將這些字段作爲表單的一部分，您需要將name屬性分配給這些元素。一旦將name屬性添加到它們，角形驗證將開始顯示其感染。

您也可以通過submitted標誌來保持已提交的表格已被getPrice()方法提交或不提交。更重要的是點擊使該標誌以true &使用它，而這樣做使用ng-class

標記

<form novalidate name="formStep1"> 
    <select ng-class="{'error': submitted && formStep1.address.$invalid}" name="address" ng-model="address" required> 
    <option></option> 
    <option></option> 
    </select> 

    <input ng-class="{'error': submitted && formStep1.weight.$invalid}" type="text" name="weight" ng-model="weight" /> 

    <label>{{price}}</label> 

    <button ng-click="submitted=true; getPrice()" /> 
    <button value="submit"/> 

</form>

來源

2015-10-19 17:07:59

好吧，我怎樣才能讓ng-class在選擇或輸入爲空時點擊getPrice時顯示錯誤？我用做驗證：納克級=「{錯誤：！formStep1 $ error.valid && $ formStep1提交」} 如果我不能提交與形式NG點擊我可以$沒有提交我可以嗎？ –

@RogerNomen沒有你看着我的更新答案 –

是的，但是當我把名字NG-點擊功能犯規把形式提交狀態 –

驗證回答自己與@的Pankaj的幫助：

隨着輸入的所有名稱和傳遞formStep1如用getPrice函數的自變量我可以訪問到像輸入驗證：

$scope.getPrice = function (form) { 
    if(!form.nameOfInput.$dirty) { 
    form.nameOfInput.$invalid = true; 
    } else { 
    // GET PRICE 
    } 
}

這是一個很好的方法，以防需要驗證非提交按鈕中的輸入嗎？

來源

2015-10-19 22:09:02

「假」提交中的角度表單驗證

回答

相關問題