angular input directives

by Richard Hunter

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular.min.js"></script>
<div ng-controller="myForm">
     <h1 ng-bind="title">default title</h1>

    <form name="dateForm">
        <label>date:
            <input type="datetime-local" name="date" ng-model="form.date" min="2013-01-20" max="2013-06-05" required />
        </label>
        <label>email:
            <input type="email" name="email" ng-model="form.email" required/>
            <div class="error" ng-show="dateForm.email.$error.required">must have email</div>
            <div class="error" ng-show="dateForm.email.$error.email">invalid email</div>
        </label>
        <label>number:
            <input type="number" name="number" required ng-model="form.number" />
            <div class="error" ng-show="dateForm.number.$error.required">must have number</div>
            <div class="error" ng-show="dateForm.number.$error.number">invalid</div>
        </label>
        <label>red
            <input type="radio" ng-model="form.color" value="red" />
        </label>
        <label>green
            <input type="radio" ng-model="form.color" value="green" />
        </label>
        <label>blue
            <input type="radio" ng-model="form.color" value="blue" />
        </label>
        <label>Text field:
            <input name="myText" type="text" ng-model="form.mytext" required ng-change="onTextChange()" />
            <div class="error" ng-show="dateForm.myText.$error.required">required field!</div>
        </label>
        <label>Time field:
            <input name="time" type="time" ng-model="form.time" required />
            <div class="error" ng-show="dateForm.time.$error.required">required field!</div>
        </label>
        <label>url field:
            <input name="url" type="url" ng-model="form.url" required />
            <div class="error" ng-show="dateForm.url.$error.required">required field</div>
            <div class="error"...

CSS

.error {
    color : orange;
}
label {
    display : block;
    margin-top : 12px;
}

JavaScript

angular.module('myapp', [])
    .controller('myForm', ['$scope', function ($scope) {
    $scope.title = "date directive";
    $scope.form = {
        date: new Date(2013, 9, 22),
        color: 'red'

    };
    $scope.onTextChange = function () {
        console.log(arguments);
    }

}]);

angular.bootstrap(document, ['myapp']);