ng-form-feedback's Introduction

ng-form-feedback

An AngularJS directive for an interactive form feedback directive

live demo

How to install?

nff is really easy to implement to your existing or new angularjs application.

step 1: you can download the ng-form-feedback via bower
```
 bower install ng-form-feedback
```
or download from git repository, located inside /dist folder and then add the file to your index.html
```
 <script src="angular.min.js"></script>
 <script src="ng-form-feedback.js"></script> 
```
there is also minified version
```
<script src="ng-form-feedback.min.js"></script> 
```

step 2: inject the module to your app

 angular.module("example", ['ngFormFeedback'])

step 3: add nff directives in your form.

nff-min: minimum characters required for the field

 <form action="">
   <input nff-min="12" type="email">
   <input nff-min="6" type="password">
 </form>

step 4: That's all. enjoy! :)

Configuration

You can configure nff settings by injecting 'nffSettings' provider inside yourApp.run

var exampleApp = angular.module("example", ['ngFormFeedback'])
.run(function (nffSettings) {

/////////////////////////////////////////////////// 
//	configurable options for ng-form-feedback 	//
/////////////////////////////////////////////////
	
	// change the phase colors
	// accepts hex colors and rgb
	nffSettings.phases = {
		1: "#FFB74D",
		2: "red",
		4: "rgb(79, 168, 61)"
	};
	
	// you can also change specific phase
	nffSettings.phases[3] =  "#76FF03";
	
	// height of the feedback bar
	// in pixels
	nffSettings.height = 10;
	
	// animation speed during phase changes
	// in seconds
	nffSettings.speed = 0.3;
	
	// positioning element from top 
	// in pixels
	nffSettings.top = 10;
	
});