Showing posts with label angular forms. Show all posts
Showing posts with label angular forms. Show all posts
angular-formly - JavaScript powered forms for AngularJS

angular-formly - JavaScript powered forms for AngularJS

June 28, 2017
angular-formly is an AngularJS module which has a directive to help customize and render JavaScript/JSON configured forms. The formly-form directive and the formlyConfig service are very powerful and bring unmatched maintainability to your application's forms.
 <form name="vm.someForm" ng-submit="vm.handleSubmit()">  
  <formly-form model="vm.model" fields="vm.fields" options="vm.options">  
   <button type="submit" ng-disabled="vm.someForm.$invalid">Submit</button>  
   <button type="button" ng-click="vm.options.resetModel()">Reset</button>  
  </formly-form>  
 </form>  
From there, it's just JavaScript. Allowing for DRY, maintainable, reusable forms.

Learning

Egghead.io Lessons https://www.youtube.com/watch?v=o90TMDL3OYc&feature=youtu.be Check it out here

Examples

The website is full of tons of examples.

More

Find more resources at learn.angular-formly.com

Documentation

Find all the documentation at docs.angular-formly.com.

Plugins

Find all the plugins at docs.angular-formly.com/page/plugins

Getting Help

Please don't file an issue unless you feel like you've found a bug or have a feature request. Instead, go to help.angular-formly.com and follow the instructions.

Bookmark Links

Finally, You can bookmark these :-)
Chilled loading buttons for AngularJS

Chilled loading buttons for AngularJS

May 13, 2017

angular-promise-buttons


Chilled Buttons for AngularJS http://johannesjo.github.io/angular-promise-buttons/

For Angular 2+ version go here.

There are cool loading buttons out there for angular. Only thing which annoys me, is that you (most of the times) have to manually trigger their loading state via a boolean which leads to a bit of repetition, declaring those again and again. ```angular-promise-buttons``` exists to take away some of that, by handling the loading state directly by passing the promise. Saves you at least two lines of code every time. Check out the demo Also you can play with the code on plnkr Bug-reports or feature request as well as any other kind of **feedback is highly welcome!**

getting started


Install it via bower or npm
 bower install angular-promise-buttons -S  
 # or via npm  
 npm install angular-promise-buttons -S  
and add
 angularPromiseButtons  
as dependency in your main module:
 angular.module('yourApp',[  
  'angularPromiseButtons'  
 ]);  
Using the buttons is easy. Just return the promise in question in your service caller and you're good to go: You can also directly return the promise via the function passed to
 ng-click  
 <button ng-click="yourServiceCaller()" promise-btn>Click me to spin!</button>  
 // inside some controller  
 $scope.yourServiceCaller = function ()  
 {  
  return fakeFactory.method().then(...);  
 };  

using it for forms

For using the promise buttons with
 ng-submit  
you need to apply them to the form directive and add type="submit" to the buttons you want to show a loader for:
 <form ng-submit="yourServiceCaller()"  
    promise-btn>  
  <button type="submit">MyBtn</button>  
 </form>  
 // inside some controller  
 $scope.yourServiceCaller = function ()  
 {  
  return fakeFactory.method().then(...);  
 };  

alternative syntax and using $event

There is also an alternative syntax, which allows you to share promises between buttons (and possibly other directives) and is especially useful, if you want to use the
 $event  
somehow:
 <button ng-click="yourServiceCaller($event)"  
     promise-btn="yourPromise">MyBtn</button>  
Now you just have to assign a promise to
 yourPromise  
Now you just have to assign a promise to
 yourPromise  
 // inside some controller  
 $scope.yourServiceCaller = function ()  
 {  
  $scope.yourPromise = fakeFactory.method().then(...);  
  // this is now also possible  
  $event.preventDefault();  
 };  

styling the button


The base-styles might not be overwhelmingly sexy, but it is easy to fix that! There are lots of free css-spinners out there. Just find one of your liking and add the css.

Resources:

 * http://cssload.net/  
 * http://projects.lukehaas.me/css-loaders/  
 * http://tobiasahlin.com/spinkit/  

configuration



There are also some defaults for you to set, if you like. You can do this by using the
 angularPromiseButtonsProvider  
 angular.module('exampleApp', [  
  'angularPromiseButtons'  
 ])  
 .config(function (angularPromiseButtonsProvider)  
 {  
  angularPromiseButtonsProvider.extendConfig({  
   spinnerTpl: '<span class="btn-spinner"></span>',  
   disableBtn: true,  
   btnLoadingClass: 'is-loading',  
   addClassToCurrentBtnOnly: false,  
   disableCurrentBtnOnly: false,  
   minDuration: false,  
   CLICK_EVENT: 'click',  
   CLICK_ATTR: 'ngClick',  
   SUBMIT_EVENT: 'submit',  
   SUBMIT_ATTR: 'ngSubmit',  
   BTN_SELECTOR: 'button'  
  });  
 });  
change options via
 promise-btn-options  
You can also change all the options but not the spinner template by specifying the options via
 promise-btn-options  
 <button class="btn"  
     ng-click="yourServiceCaller()"  
     promise-btn-options="options"  
     promise-btn="yourPromise">MyBtn <span>Look I'm nested content</span>  
 </button>  
Now you just have to assign a promise to
 yourPromise  
 // inside some controller  
 $scope.options = {  
  disableBtn: false,  
  btnLoadingClass: 'is-spinning'  
 };  
 $scope.yourServiceCaller = function ()  
 {  
  $scope.yourPromise = fakeFactory.method().then(...);  
 };  
Thats all the logic there is (for now). Adjusting the look and feel of the spinner can be done using your own styles.

❤ contribute ❤

I'm happy for any issue or feature request , you might encounter or want to have. Even a one liner is better, than no feedback at all. Pull requests are also highly welcome. Just fork the repository, clone it and run grunt serve for development. Another important factor is the number of developers using and thus testing angular-promise-buttons Tell your fellow programmers, say that you use it on ng-modules , tweet or even blog about it. angular-promise-buttons is published under The GNU Lesser General Public License V2.1

Note: Special thanks to https://github.com/johannesjo