Angular: Inputs

HTML

<script src="http://ci.angularjs.org/job/angular.js-angular-master/lastSuccessfulBuild/artifact/build/pkg/0.10.7-e86bafec/angular-0.10.7-e86bafec.js"></script>
<form name="myForm">
  regexp /^angular(js)?$/: <input type="text" ng:model="regexpValidated" ng:pattern="regexp" />{{regexpValidated}}<br />
    user name (min 5, max 10): <input type="text" ng:model="user.name" required="{{isRequired}}" ng:minlength="5" ng:maxlength="10"/>(<input type="checkbox" ng:model="isRequired"/> required)<br />
  user age: <input type="number" name="ageAlias" ng:model="user.age" min="1" max="100" required/><br />
  <span class="errors" ng:show="myForm.ageAlias.error.MIN">Minimum age is 1 !</span>
  <span class="errors" ng:show="myForm.ageAlias.error.MAX">Maximum age is 100 !</span>
  user email: <input type="email" name="emailAlias" ng:model="user.email" /><br />
  user agree(true/false): <input type="checkbox" name="agree" ng:model="user.agree" /><br />
  user color(black/white): <input type="checkbox" name="color" ng:model="user.color" ng:true-value="black" ng:false-value="white" /><br />
  color:
  <input type="radio" name="baseColor" ng:model="baseColor" value="white"/>
  <input type="radio" name="baseColor" ng:model="baseColor" value="black" />
  <input type="radio" name="baseColor" ng:model="baseColor" value="red" />
  {{baseColor}} <a href ng:click="baseColor='red'">set to red</a><br />

  list: <input type="text" name="list" ng:model="names" ng:list required/>{{names}}<br />

  Errors in the form:
  <ul class="errors">
    <li ng:repeat="(name, widgets) in myForm.error">{{name}}:
        <ul><li ng:repeat="w in widgets">{{w.widgetId}}</li></ul>
    </li>
  </ul>

  user = {{user}} <a href ng:click="user.name = 'Vojta'">set name to Vojta</a><br />
</form>

CSS

.ng-invalid {
    border-color: red;
}

.ng-valid {
    border-color: green;
}

.ng-dirty {
    border-style: solid;
    border-width: 2px;
}

.ng-pristine {
    border-style: solid;
    border-width: 1px;
}

.errors {
    color: red;
}

JavaScript

function Main($scope) {
  $scope.regexp = /^angular(js)?$/;
}