AngularJS Example

by Urigo

HTML

<div ng-app="">
  <form name="myForm" ng-controller="Ctrl">
    Email: <input type="email" name="signup[input]" ng-model="text" required>
    <span class="error" ng-show="myForm.signup[input].$error.required">
      Required!</span>
    <span class="error" ng-show="myForm.signup[input].$error.email">
      Not valid email!</span>
    <tt>text = {{text}}</tt><br/>
    <tt>myForm.signup[input].$valid = {{myForm.signup[input].$valid}}</tt><br/>
    <tt>myForm.signup[input].$error = {{myForm.signup[input].$error}}</tt><br/>
    <tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
    <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
    <tt>myForm.$error.email = {{!!myForm.$error.email}}</tt><br/>
  </form>
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 
<script src="http://docs.angularjs.org/angular-1.0.1.min.js"></script>
<style>
.ng-invalid { border: 1px solid red; }

JavaScript

function Ctrl($scope) {
  $scope.text = '[email protected]';
}