Angular: Empty Fiddle

http://angularjs.org/

by jannis

HTML

<script src="http://code.angularjs.org/1.1.5/angular.js"></script>
<form ng-controller="FormCtrl" name="loginForm" novalidate>
    
  <input type="text"
    name="username"
    ng-model="username"
    ng-minlength="7"
    ng-pattern="salaryId"
    placeholder="Username"
    required />
        
  <span class="inline-error"
    ng-show="!loginForm.username.$error.minlength && loginForm.username.$error.pattern">
    Your Salary ID starts with an F or M followed by 6 digits.
  </span>
    
  <div class="debug">
      Debug:<br /><hr /><br />
    {{ loginForm.username.$error }}
  </div>
    
</form>

CSS

hr { height: 0; border: none; border-bottom: 1px solid #aaa; }
form { padding: 20px; }
input { padding: .4em .8em; }
.inline-error { display: block; margin: 1em 0; color: red }
.debug {
    background: #efefef;
    border: 1px solid #e0e0e0;
    padding: 20px;
    margin: 20px;
    font: 1em/1 monospace;
}

JavaScript

var myApp = angular.module('myApp',[]);

function FormCtrl($scope) {
    $scope.salaryId = /^[F|M]\d{6}$/i;
}