Angular: Inputs
HTML
<script src="http://ci.angularjs.org/job/angular.js-angular-master/232/artifact/build/pkg/0.10.7-64912069/angular-0.10.7-64912069.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: 162px;
}
.ng-pristine {
border-style: solid;
border-width: 1px;
}
.errors {
color: red;
}
JavaScript
function Main($scope) {
$scope.regexp = /^angular(js)?$/;
}