2015-11-13 66 views
0

這是我第一次在這裏問一些問題,所以我儘可能地提供了儘可能多的信息來幫助我解決困境。ng-invalid參數可以像條件ng-required一樣工作嗎?

我有一個關於我正在建立的HTML表單的問題,它使用了一些AngularJS,我正在學習更多關於它的內容。

表單本身使用一些數學,我從兩個領域一次產生股息,同時也計入總人數。該頁面本身將在頁面上產生紅利,以便用戶實時查看他們的數學,因此大多數(如果不是全部)字段上已經存在ng模型。值得注意的是,由於我在0-100%之間進行百分比分配,所以田地的紅利本身不能超過1。

以前,如果分子大於分母更高,或分母比人的最大金額我想有一個說明欄以前是一個非必填字段切換到需要像這樣高:

<textarea rows="4.5" cols="50" id="My_Fields_Notation__c" tabindex="11" 
name="My_Fields_Notation__c" maxlength="255" 
ng-required='fieldDen < fieldNum || fieldDen > numberOfPeople' 
type="text"></textarea> 

我的問題是,如果我是刪除NG-需要在這一領域,並添加一個單獨的NG-無效的分子和分母每個

(在分母上ng-invalid='fieldDen < fieldNum'分子和ng-invalid='fieldDen > numberofPeople'

如果滿足這些參數,是否會導致字段不提交? (例如,如果用戶具有分子:100,分母:50和/或人數:100,分母:101將不提交表格,因爲數字不符合我想設置的那些參數)

編輯:如果這有助於更好地解釋我的情況。我有這個表格的幾個分子和分母都有自己的ng型號名稱。

的分子不能比的分母 分母不能超過人 如果兩個數值越高或發生在任何的分子和分母的更高,我要阻止提交表單

在中同一時間窗體是在drupal頁面中,我已經能夠成功調用的唯一JS文件是目前爲止的角度文件,所以我認爲如果需要創建任何其他腳本,則需要在頁面中編寫其他任何腳本控制器。

+0

我想我有一個可能的解決方案是否有人能夠證明我的代碼/看我缺少什麼
'VAR應用= angular.module(「對myApp」, []); app.controller( 'mainCtrl',函數($範圍){ \t \t $ scope.check =函數(){ \t \t \t如果($ scope.firstDen){ \t \t \t \t $ scope.demoFormData.firstDen 。$ setValidity(最大值,$ scope.firstDen <= $ scope.numberOfPeople); \t \t \t} \t \t \t如果($ scope.firstNum){ \t \t \t \t $ $ scope.demoFormData.firstNum SETVAL。 idity(max,$ scope.firstNum <= $ scope.firstDem); \t \t \t} \t}; });'
然後我把一個禁用的ng設置爲'ng-disabled =「demoFormData。$ invalid」' –

回答

0

如果您的表單提交或不提交取決於您如何提交。

,如果你使用它會提交:

<button ng-click='formValid() && mySubmitFunction()'>Submit only if valid</button> 

要檢查您的驗證條件滿足時添加驗證功能:

$scope.formValid = { 
    return ($scope.fieldDen < $scope.numberofPeople) && ($scope.fieldDen < $scope.fieldNum) 
} 

<button ng-click='mySubmitFunction()'>Submit</button> 

如果你使用它不會提交

如果您只想驗證某個輸入,您也可以爲此寫入驗證指令。讓我們來展示一下自定義的錯誤消息,如果不滿足某些條件,如從文檔中取得的示例plunkr:http://plnkr.co/edit/7ewLoTgWWwyeo7HAvTqU?p=preview

+0

好吧,那麼對於mySubmitFunction,我應該在代碼中添加這個腳本標記嗎? ('FieldForm',[]) .controller('InvalidController',['$ scope',function($ scope){ $ scope.mySubmitFunction = function(){ if(fieldDen numberOfPeople){ \t \t \t fieldDen = NG-無效; }; }]);' 或者它看起來像不同? –

+0

我更新了我的答案以顯示驗證功能。 –

+0

給出了這個範圍,幾件事情:1.如果在一個表單上有多個分子和分母ng模型,這個工作是否可行? 2.因爲我實際上是在Drupal內容管理器中設置它的?我是否可以將範圍代碼添加到

0

您可以將ngPattern添加到要驗證的輸入,然後您可以使用$ valid給出的angularjs驗證該元素。

<form name="myForm"> 
 
    <input type="text" name="userName" ng-model="user.name" ng-pattern="{string}" > 
 
</form> 
 

 
//to test just use 
 
{myForm.userName.$valid}

+0

ng模式是否適用於布爾ng模型?有點像這樣: 'ng-pattern =''model1'''model2'||'model2'>'modelA'&& [1-9] {1,3}「' –

+0

我認爲不,屬性值是包含正則表達式的字符串(RegExp) –

相關問題