角JS'的形式輸入$的isEmpty功能

我的代碼看起來是這樣的 -

<form name="myForm" ng-submit="!myForm.phone.$isEmpty(this.$viewValue)" action="/my/url" method="get"> 
<input name="phone"> 
<button type="submit">submit</button> 
</form>

現在我不能提交表單，即使我填的電話號碼字段。

但如果我這樣的代碼：

<form name="myForm" ng-submit="!myForm.phone.$isEmpty(myForm.phone.$viewValue)" action="/my/url" method="get"> 
<input name="phone"> 
<button type="submit">submit</button> 
</form>

其完美的工作了。

所以困難與'這'。我甚至不能檢查這個上下文，它應該是$ scope.myForm.phone的上下文，但它不是。有人可以請解釋。

來源

2015-07-28 Vineet ' DEVIN' Dev

所以這是否意味着，即使我想上下文是myForm.phone，我不能這樣做在我看來？因爲語境永遠是父母，即範圍。不，這違反了詞法範圍的正常JavaScript行爲？ –

不，你沒有力量來改變範圍。但是，如果你實現了一個[自定義指令]（http://plnkr.co/edit/deAQoIw4KfekIh3ZOt1j?p=info）並將其應用於表單中的輸入，該指令將具有字段範圍，因爲它將引用'ng-model'的字段 –

這不是ng-submit的用途。 ng-submit是提交表單時調用的函數或表達式。這與驗證無關。如果你想確保文本字段在提交之前不是空的，你只需要添加required然後如果它是空的myForm.$invalid將是真實的。

這就是你正在嘗試做的：

HTML

<form name="myForm" ng-submit="submit(phone)"> 
    <input name="phone" type="text" ng-model="phone.value" required> 
    <button type="submit" ng-disabled="myForm.$invalid" >submit</button> 
</form>

控制器

$scope.submit = function(phone){ 
    console.log('phone', phone); 
} 

$scope.phone = { 
    value: '' 
};

更新

您傳入ng-submit的this是對您的控制器的引用。由於您的name屬性設置爲myForm，因此您可以通過this.myForm和手機型號this.myForm.phone訪問表單模型。所以，如果你想使用$isEmpty覈實，如果該字段爲空，你將不得不使用：

this.myForm.phone.$isEmpty(this.myForm.phone.$viewValue)

來源

2015-07-28 08:24:57

輸入字段不是必需的。沒有使用所需的。爲什麼這種情況是因爲在我的代碼中稍後可能會有多個輸入字段，並且它們中的所有字段都不是必需的。唯一的條件是其中一個應該填補。我發現使用$ isEmpty的最簡單方法。但我同意ng-submit不應該這樣使用。
但你能解釋爲什麼我不能使用$ isEmpty（）函數中myForm.phone的上下文嗎？ –

很驚訝地發現'this'可以在模板和[引用當前範圍]（http://plnkr.co/edit/wSkhcLSoC77wJoE9y1La?p=preview）中訪問，而不是控制器。但你是對的，它可以達到formController，因爲它駐留在作用域對象 –

ng-submit用來當表單提交的時刻提供了一個處理程序。你要找的內容是禁止submit按鈕，ng-disabled

<form name="myForm" ng-submit="functionInController()" action="/my/url" method="get"> 
<input name="phone" required> 
<button type="submit" ng-disabled="myForm.$invalid">submit</button> 
</form>

注重required指令添加到輸入。這確保這個字段不是空的提交

來源

2015-07-28 08:25:19

好的答案。雖然我認爲輸入將需要一個賦予驗證生效的「ng-model」指令。 –

@MattHerbstritt以及它取決於。最近我正在挖掘一個關於角度形式的複雜問題。我瞭解到，表單驗證的所有角度指令（max，min，required等）實際上都是圍繞瀏覽器屬性的包裝。它們只提供額外的（角度）功能，但仍然由瀏覽器處理。這就是爲什麼你可以添加'required'，並且當字段爲空時將無法提交表單。但是，如果您提供自定義驗證，表單的無效狀態（角度）不會阻止它提交。你必須添加'ng-disabled'來手動控制它 –

嗨。感謝您的禁用，無效和其他事情。但是當我試圖在$ isEmpty（）中使用它時，真正引起我興趣的是'this'的定義。實際上有2個輸入，它們都是可選的，所以不需要使用所需的屬性。但其中一個必須填補。我在角js中看到，如果輸入字段不是髒的，那麼字段也是有效的，所以在這裏不使用$ invalid。 –

角JS'的形式輸入$的isEmpty功能

回答

相關問題