angular.module('exampleApp', [
'ngFabForm',
'ngMessages',
'ngAnimate'
])
.config(function (ngFabFormProvider)
{
ngFabFormProvider.extendConfig({
setAsteriskForRequiredLabel: true
});
})
.controller('exampleCtrl', function ($scope, ngFabForm)
{
$scope.submit = function ()
{
alert('Form submitted');
};
$scope.formDisabled;
$scope.defaultFormOptions = ngFabForm.config;
$scope.customFormOptions = angular.copy(ngFabForm.config);
});
<!DOCTYPE html>
<html ng-app="exampleApp">
<head>
<meta charset="utf-8" />
<title>Angular Fabulous Form Example</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<meta name="viewport" content="width=device-width">
</head>
<body ng-controller="exampleCtrl"></body>
<div class="container" ng-include="'example.html'">
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular-messages.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular-animate.min.js"></script>
<script src="//johannesjo.github.io/ng-fab-form/ng-fab-form.min.js"></script>
<script src="app.js"></script>
</body>
</html>
<h2><a href="https://github.com/johannesjo/ng-fab-form">Angular Fabulous Forms</a> Example</h2>
<div class="row">
<div class="col-sm-7">
<form role="form"
name="customOptionsForm"
ng-submit="submit()"
ng-fab-form-options="customFormOptions">
<div class="form-group">
<label class="control-label">Email (required)
</label>
<input type="email"
class="form-control"
placeholder="Email"
ng-model="formData.email"
required>
</div>
<div class="form-group">
<label class="control-label">Password (required)
</label>
<input type="password"
class="form-control"
id="inputPassword1"
placeholder="Password"
ng-model="formData.password"
required>
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox"
required
ng-model="formData.check">
Checkbox (required)
</label>
</div>
</div>
<div class="form-group">
<label class="control-label">required & ng-pattern (/asd/) with validation-msg-required attribute
</label>
<input type="text"
class="form-control"
placeholder="TestText"
ng-pattern="/^asd$/i"
validation-msg-required="Really really required"
name="text"
required=""
ng-model="formData.patternRequired">
</div>
<div class="form-group">
<label class="control-label">required & maxlength(5) with validation-msg-required attribute
</label>
<input type="text"
class="form-control"
placeholder="TestText"
ng-maxlength="5"
required
validation-msg-required="CUSTOM REQUIRED-MSG FTW!"
ng-model="formData.requiredMaxlength">
</div>
<div class="form-group">
<label>non required</label>
<input type="date"
class="form-control"
placeholder="TestText"
ng-model="formData.nonRequired">
</div>
<div class="form-group">
<label>Textarea (required & ng-minlength(4))</label>
<textarea ng-model="formData.textarea"
ng-minlength="4"
class="form-control"
required></textarea>
</div>
<div class="form-group">
<label>Select (required)</label>
<select ng-model="formData.select"
class="form-control"
required>
<option value=""></option>
<option value="aa">aaa</option>
</select>
</div>
<div class="form-group">
<label>Input without ngModel (does not do anything)</label>
<input type="text"
class="form-control"
placeholder="TestText"
required>
</div>
<div class="form-group">
<button type="submit"
class="btn btn-primary">Submit Form
</button>
</div>
</form>
</div>
<div class="col-sm-5">
<h3>Config-Options</h3>
<form name="configOptions">
<input type="text"
class="form-control"
placeholder="validationsTemplate"
required
ng-model="customFormOptions.validationsTemplate">
<div class="form-group">
<button type="button"
ng-click="(customFormOptions.validationsTemplate != false) ? customFormOptions.validationsTemplate=false: customFormOptions.validationsTemplate=defaultFormOptions.validationsTemplate;">
Set validationsTemplate to <span ng-show="customFormOptions.validationsTemplate">false</span>
<span ng-hide="customFormOptions.validationsTemplate">{{ defaultFormOptions.validationsTemplate }}</span>
</button>
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox"
ng-model="customFormOptions.preventInvalidSubmit">
preventInvalidSubmit
</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox"
ng-model="customFormOptions.setFormDirtyOnSubmit">
setFormDirtyOnSubmit
</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox"
ng-model="customFormOptions.preventDoubleSubmit">
preventDoubleSubmit
</label>
</div>
</div>
<input type="text"
class="form-control"
placeholder="preventDoubleSubmitTimeoutLength"
required
ng-if="customFormOptions.preventDoubleSubmit"
ng-model="customFormOptions.preventDoubleSubmitTimeoutLength">
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox"
ng-model="customFormOptions.scrollToAndFocusFirstErrorOnSubmit">
scrollToAndFocusFirstErrorOnSubmit
</label>
</div>
</div>
<input type="text"
class="form-control"
placeholder="scrollAnimationTime in ms or 'smooth'"
required
ng-if="customFormOptions.scrollToAndFocusFirstErrorOnSubmit"
ng-model="customFormOptions.scrollAnimationTime">
<input type="number"
class="form-control"
placeholder="scrollOffset in px"
required
ng-if="customFormOptions.scrollToAndFocusFirstErrorOnSubmit"
ng-model="customFormOptions.scrollOffset">
</form>
<h4>Options Object</h4>
<pre>{{ customFormOptions |json }}</pre>
</div>
</div>
[Project on github](https://github.com/johannesjo/ng-fab-form)
.validation-success {
opacity: 1;
display: block;
position: absolute;
right: -7.2px;
bottom: -7.2px;
font-size: 28.8px;
width: 36px;
height: 36px;
line-height: 36px;
text-align: center;
border-radius: 36px;
color: #62b14c;
transition: all ease-out 0.32s; }
.validation-success:after {
display: block;
content: '\e013';
font-family: 'Glyphicons Halflings'; }
.validation-success.ng-hide {
transition-delay: 0s;
transition: all ease-out 0.12s;
opacity: 0;
transform: rotate(360deg); }
.ng-hide-remove li {
opacity: 0; }
.validation {
color: #fff;
margin: 0;
position: relative;
font-size: 14px;
overflow: visible;
background: #c00640; }
.validation ul {
display: block;
overflow: hidden; }
.validation li {
display: block;
line-height: 1;
background: #c00640;
position: absolute;
right: -4px;
top: -10px;
text-align: center;
font-weight: bold;
padding: 2px 10px;
color: #fff;
transform: rotate(0deg);
transition: all ease-in 0.2s;
opacity: 1;
transition-delay: 0s; }
.validation li.ng-enter {
opacity: 0;
top: 0; }
.validation li.ng-leave {
transition: all ease-in 0s;
opacity: 0; }
*:focus + .validation li {
background-color: #63bff8 !important; }
input.ng-touched.ng-invalid:not(.ng-valid), textarea.ng-touched.ng-invalid:not(.ng-valid), select.ng-touched.ng-invalid:not(.ng-valid) {
border-color: #c00640; }
input:focus, input:focus.ng-touched.ng-invalid:not(.ng-valid), textarea:focus, textarea:focus.ng-touched.ng-invalid:not(.ng-valid), select:focus, select:focus.ng-touched.ng-invalid:not(.ng-valid) {
border-color: #63bff8; }
input.ng-valid-required.ng-valid:not(.ng-invalid), textarea.ng-valid-required.ng-valid:not(.ng-invalid), select.ng-valid-required.ng-valid:not(.ng-invalid) {
border-color: #62b14c; }
form[class*="ng-invalid"] button.btn {
background: #63bff8;
transition: none; }
form button.btn {
transition: all ease-in 0.5s;
background: #62b14c; }