angularJS在值爲空時避免出現錯誤消息

我有一個類似的代碼，如下面的註冊表單所示。在這個例子中，電子郵件的值是預加載的，因此沒有顯示錯誤。但我怎麼能避免錯誤時，有沒有預載值，換句話說，如果值是空的，如：angularJS在值爲空時避免出現錯誤消息

$scope.Email = {valor:""};

Here是例如：

<!doctype html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Example - example-example59-production</title> 
 

 

 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.1/angular.min.js"></script> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.1/angular-animate.js"></script> 
 

 
</head> 
 

 
<body ng-app="formExample"> 
 
    <script> 
 
    angular.module('formExample', []) 
 
     .controller('FormController', ['$scope', 
 
     function($scope) { 
 
      $scope.Email = { 
 
      valor: "[email protected]" 
 
      }; 
 
     } 
 
     ]); 
 
    </script> 
 
    <style> 
 
    .my-form { 
 
     transition: all linear 0.5s; 
 
     background: transparent; 
 
    } 
 
    .my-form.ng-invalid { 
 
     background: red; 
 
    } 
 
    </style> 
 
    <form name="myForm" ng-controller="FormController"> 
 
    Email: 
 
    <input name="input" ng-model="Email.valor" required class="my-form"> 
 
    <span class="error" ng-show="myForm.input.$error.required">Required!</span> 
 
    <br> 
 
    <code>userType = {{Email.valor}}</code> 
 
    <br> 
 
    <code>myForm.input.$valid = {{myForm.input.$valid}}</code> 
 
    <br> 
 
    <code>myForm.input.$error = {{myForm.input.$error}}</code> 
 
    <br> 
 
    <code>myForm.$valid = {{myForm.$valid}}</code> 
 
    <br> 
 
    <code>myForm.$error.required = {{!!myForm.$error.required}}</code> 
 
    <br> 
 
    </form> 
 
</body> 
 

 
</html>

來源

2015-11-03 lito

您是否故意驗證電子郵件頁面加載出於任何原因？或者是你設計你的代碼的方式的副作用？ –

哦，我剛剛意識到你從[documentation]（https://docs.angularjs.org/api/ng/directive/form）複製了確切的示例......你有什麼嘗試，哪些不起作用？ –

如果表單是原始的（即，輸入尚未更改），則可以隱藏該錯誤。喜歡的東西：

<code ng-if='myForm.myControl.$dirty'>myForm.$error.required = {{!!myForm.$error.required}}</code><br>

如果這就是你要找的內容，還有更多的細節一個線程在這裏： How to make ngMessage for required fields only show when dirty or submitting a form?

來源

2015-11-03 02:25:59

改變你的CSS本

input.ng-invalid.ng-dirty { 
     background-color: #FA787E; 
    } 

    input.ng-valid.ng-dirty { 
     background-color: #78FA89; 
    }

相反更換的

.my-form { 
     transition: all linear 0.5s; 
     background: transparent; 
    } 
    .my-form.ng-invalid { 
     background: red; 
    }

來源

2015-11-03 02:42:00 Shohel

angularJS在值爲空時避免出現錯誤消息

回答

相關問題