<!doctype html>
<html ng-app="plunker" >
<head>
<meta charset="utf-8">
<title>AngularJS Plunker</title>
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
<script src="https://raw.github.com/angular-ui/angular-ui/master/build/angular-ui.js"></script>
<script src="https://raw.github.com/angular-ui/angular-ui/uiinput/modules/directives/input/input.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<section id="form-horizontal" ng-controller="HorizontalFormCtrl">
<div class="page-header">
<h1>Horizontal form with validation</h1>
</div>
<div class="row">
<div class="well span8">
<form class="form-horizontal">
<fieldset>
<ui-input ng-model="model.required" type="text" ng-required='true' input-label="Required input"></ui-input>
<ui-input ng-model="model.email" type="email" ng-required='true' input-label="Required e-mail input"></ui-input>
<ui-input ng-model="model.number" type="number" min="5" input-label="Non-required number input" validation="{'min' : 'This must be a number > 5'}"></ui-input>
<ui-select ng-model="model.colors" ng-options="c.name for c in colors" ng-required='true' input-label="Select a color" ></ui-select>
<ui-textarea ng-model="model.text" rows="5" input-label="Type some more!"></ui-textarea>
</fieldset>
</form>
</div>
<div class="span4">
<pre>model = {{model | json}}</pre>
</div>
</div>
</section>
<section id="form-vertical" ng-controller="VerticalFormCtrl">
<div class="page-header">
<h1>Vertical form with validation</h1>
</div>
<div class="row">
<div class="well span8">
<form class="form-horizontal">
<fieldset>
<ui-input ng-model="model.required" type="text" ng-required='true' kind="vertical" placeholder="Type something here..." input-label="Required input"></ui-input>
<ui-input ng-model="model.email" type="email" ng-required='true' kind="vertical" placeholder="email@domain.com" input-label="Required e-mail input"></ui-input>
<ui-input ng-model="model.number" type="number" min="5" kind="vertical" input-label="Non-required number input" validation="{'min' : 'This must be a number > 5'}"></ui-input>
</fieldset>
</form>
</div>
<div class="span4">
<pre>model = {{model | json}}</pre>
</div>
</div>
</section>
</body>
</html>
var app = angular.module('plunker', ['ui.directives']).value('ui.config', {
uiinput:{
family:'bootstrap',
kind:'horizontal',
validation:{
'required':'This field is required',
'email':'This must be an e-mail'
}
}
});
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
var HorizontalFormCtrl = function ($scope) {
$scope.model = {};
$scope.colors = [
{name:'black', shade:'dark'},
{name:'white', shade:'light'},
{name:'red', shade:'dark'},
{name:'blue', shade:'dark'},
{name:'yellow', shade:'light'}
];
};
var VerticalFormCtrl = function ($scope) {
$scope.model = {};
};
/* Put your css in here */
<div class="control-group" ng-class="{'error' : $field.$invalid, 'success' : $field.$valid}">
<label class="control-label" for="{{$control.id}}">{{$control.label}}</label>
<div class="controls">
<textarea id="{{$control.id}}"></textarea>
<span class="help-inline" ng-repeat="(key, value) in $field.$error" ng-show="value">{{$control.validation[key]}}</span>
</div>
</div>
<div class="control-group" ng-class="{'error' : $field.$invalid, 'success' : $field.$valid}">
<label class="control-label" for="{{$control.id}}">{{$control.label}}</label>
<div class="controls">
<select id="{{$control.id}}"></select>
<span class="help-inline" ng-repeat="(key, value) in $field.$error" ng-show="value">{{$control.validation[key]}}</span>
</div>
</div>
<div ng-class="{'error' : $field.$invalid, 'success' : $field.$valid}">
<label for="{{$control.id}}">{{$control.label}}</label>
<input type="text" id="{{$control.id}}">
<span ng-repeat="(key, value) in $field.$error" ng-show="value">{{$control.validation[key]}}</span>
</div>
<div class="control-group" ng-class="{'error' : $field.$invalid, 'success' : $field.$valid}">
<label class="control-label" for="{{$control.id}}">{{$control.label}}</label>
<div class="controls">
<input type="text" id="{{$control.id}}">
<span class="help-inline" ng-repeat="(key, value) in $field.$error" ng-show="value">{{$control.validation[key]}}</span>
</div>
</div>