AngularJS input

by deathhell

HTML

<div ng-app>
     <div ng-controller="Ctrl">
        <form name="myForm">
        User name: <input type="text" name="userName" ng-model="user.name" required>
        <span class="error" ng-show="myForm.userName.$error.required">
        Required!</span><br>
        Last name: <input type="text" name="lastName" ng-model="user.last"
        ng-minlength="3" ng-maxlength="10">
        <span class="error" ng-show="myForm.lastName.$error.minlength">
        Too short!</span>
        <span class="error" ng-show="myForm.lastName.$error.maxlength">
        Too long!</span><br>
        </form>
        <hr>
        <tt>user = {{user}}</tt><br/>
        <tt>myForm.userName.$valid = {{myForm.userName.$valid}}</tt><br>
        <tt>myForm.userName.$error = {{myForm.userName.$error}}</tt><br>
        <tt>myForm.lastName.$valid = {{myForm.lastName.$valid}}</tt><br>
        <tt>myForm.lastName.$error = {{myForm.lastName.$error}}</tt><br>
        <tt>myForm.$valid = {{myForm.$valid}}</tt><br>
        <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br>
        <tt>myForm.$error.minlength = {{!!myForm.$error.minlength}}</tt><br>
        <tt>myForm.$error.maxlength = {{!!myForm.$error.maxlength}}</tt><br>
</div>
    
</div>

JavaScript

function Ctrl($scope) {
    $scope.user = {name: 'guest', last: 'visitor'};
}