AngularJS：NG-如果檢查模型值，但只設置輸入模式值，如果輸入是$有效

這是我想做什麼：

我有兩個輸入的形式之一是鍵入「電子郵件「，另一種是輸入」密碼「。
有所謂的形式在$範圍
兩個輸入有NG-模型指令（NG-模型=「form.input_name」）
我想讓旁邊的圖標看起來只有當有些事情在打字輸入的對象在輸入
該圖標有一個附加動作來清除輸入（使用angularjs hammer的指令'ng-tap'）。
要檢查輸入是否設置並使圖標顯示，我使用ng-if =「form.input_name.length> 0」。
問題是，輸入的模型值僅在輸入爲$ valid時設置，因此對於我的電子郵件輸入，只有在輸入內容上輸入了有效的電子郵件格式（[email protected]）。

有沒有辦法檢查輸入的視圖值ng-if還是有更好的解決方案來使圖標出現？

下面是我使用（與CSS類略）代碼：

-HTML：

<form name="form-login"> 
    <input placeholder="email" type="email" ng-model="form.email" required> 
    <i hm-tap="clearContent('email')",ng-if="form.email.length>0"> 

    <input placeholder="password" type="email" ng-model="form.passwd" required> 
    <i hm-tap="clearContent('passwd')",ng-if="form.passwd.length>0"> 
</form>

- 函數來清除輸入的CoffeeScript

$scope.clearContent = (fieldName) -> 
     switch fieldName 
     when 'passwd' then $scope.form.passwd = "" 
     when 'email' then $scope.form.email = ""

此爲正常工作密碼輸入（因爲它沒有驗證）。感謝您的閱讀。

來源

2013-09-16 rodrigo.botti

瀏覽器驗證將保持輸入的內部值爲空，直到它通過驗證。在這種情況下，電子郵件驗證。這意味着用戶看到的和JS看到的是不同的！

您可以檢查表單輸入的$viewValue並顯示它是否長度大於0.您必須爲您的表單（您已經擁有）和每個輸入（我添加的）命名。您也可以通過FORMNAME.INPUTNAME.$viewValue訪問每個值。

<form name="formLogin"> 
    <input placeholder="email" type="email" name="email" ng-model="form.email" required /> <i hm-tap="form.email = ''" ng-if="formLogin.email.$viewValue.length>0">!</i> 
    <input placeholder="password" type="password" name="passwd" ng-model="form.passwd" required /> <i hm-tap="form.passwd = ''" ng-if="formLogin.passwd.$viewValue.length>0">!</i> 
</form>

例子：http://jsfiddle.net/TheSharpieOne/6M5JX/1/

另外，還可以通過直接在hm-tap

來源

2013-09-16 14:37:16 TheSharpieOne

感謝字段設置[爲空字符串]避免clearContent功能，即工作！需要注意的一點是，如果我使用'form-login'而不是'formLogin'作爲表單名稱，那麼ng-if指令不會出於某種原因。我不知道它需要命名約定。抱歉沒有爲您的帖子btw投票+1。我剛剛創建了我的帳戶，因此我沒有足夠的投票聲望。 –

變數名稱中不允許使用連字符/破折號，儘管它們可以在可以將密鑰作爲字符串傳遞的鍵中使用。表單名實際上是'$ scope'對象中的一個鍵，所以它是允許的，但是在模板中使用Angular解析它是另一個問題，它會從'form'中減去'login'。 – TheSharpieOne

AH，我沒有想到使用$ viewValue。很好。收回我的答案。 –

AngularJS：NG-如果檢查模型值，但只設置輸入模式值，如果輸入是$有效

回答

相關問題