realcrowd / angularjs-utilities

Hopefully useful directives, providers, filters, etc for AngularJS

angularjs-utilities

Hopefully useful directives, providers, filters, etc for AngularJS

This is a repository of all the custom AngularJS components we created that we thought could be helpful to anyone using Angular.

##Included Modules

• rcForm - This module contains all custom directives, providers, filters, etc. related to forms.

  • rcSubmit - This directive mimics the standard ngSubmit directive, but cancels the submit event if the form isn't valid. It also tracks whether a submission has been attempted on a form.
  • rcVerifySet - This directive enforces that the scope is updated before a form submission on decorated elements. This was created to work with browser plugins like Password Managers that can manipulate the DOM, but may not fire the appropriate events that Angular listens to.

• rcMailgun - This module contains the custom directive and provider used to configure and use the mailgun api validation service (http://blog.mailgun.com/post/free-email-validation-api-for-web-forms).

  • rcMailgunProvider - This provider allows you to configure the mailgun validation api and get its status.
  • rcMailgunValid - This directive is used in conjunction with the mailgun jQuery plug-in to validate e-mail addressses.

• rcDisabled - This module contains the custom directive and provider used to easily disable UI elements during long running operations.

  • rcDisabledProvider - This provider allows you to customize the logic used when the UI is being disabled.
  • rcDisabled - This directive so be placed on elements that need to be disabled.

• rcDisabledBootstrap - This module is just an augmented version of rcDisabled with a custom disable method specifically designed to work with Bootstrap.

• rcWizard - This module contains the directives used to configure and use a Wizard UI. It is dependent on the unofficial third-party jQuery Bootstrap Wizard Plug-in (http://vadimg.com/twitter-bootstrap-wizard-example/) which in turn is dependent on the official Bootstrap "Tabs" jQuery Plug-in (http://getbootstrap.com/javascript/#tabs).

  • rcWizard - This directive configures and manages all the wizard behavior.
  • rcStep - This directive is used when advanced features are required at the step level. It is not required for basic functionality

##License Copyright (c) 2013 RealCrowd http://www.realcrowd.com

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

angularjs-utilities's Issues

How to enable/disable validation based on custom conditions for specific rc-step/form?

Case in point, i have list of objects to be filled by inputs controls via add button i need the wizard to validate against the length of the list not against the inputs controls( only add button can validate inputs).
How can I achieve that?

Subsequent open of the wizard is always going to the page where we left on previous open

Firstly, thanks for the wonderful wizard utility. It really eased lot of complexity for the users.

Actually we are using the wizard within a pop-up. When we open first time, all is good as it is opening with first form. But subsequent open is always going to the page where we left on previous open. I am trying to solve this by pointing to the first page while opening the wizard, but without luck. Any help or pointers will be helpful.

Really appreciate your help.

Add bower support

Hi, can you add the bower support to redistribute your code more easily and add versioning ?

Thanks

Using this technique (forms.formName) so I can call setPristine now validation fails

Ok, here's the technique I'm using
http://jsfiddle.net/zqS79/

Which recommends setting a scope variable called forms in controller so that when it gets set in template I have access to it to set pristine (otherwise $scope.formName is undefined).

When I do that all my validation using rc seems to no longer work. Here is an example:

Name Name Required

...

Any idea why adding forms.* in front would suddenly cause rc to stop validating things for me?

make auto focus feature configurable

The behavior in rcStep that automatically focus on the first input is a sweet design.
But can it be configurable?
The issue I meet is in my form, the first element is not an input. Also if my form is very long and my first input is at the bottom of the form, this focus feature will make the page scroll down to the bottom. So each time I enter into this step, I have to first scroll up then fill the info.

      // if a rcStep is being used on the current tab, 
      // automatically focus on the first input of the current tab. This
      // allows for easier keyboard-ony navigation.
      if (steps.length > currentIndex && steps[currentIndex].element) {
        steps[currentIndex].element.find('input').first().focus();
      }

Dont show error message on start page

Hi,

First, I want to say that this was an awesome form validation.In the tutorial provided on simple login form, the message is being shown after the page loaded and in my case i want to show only the form inputs and hide the error message "required". Can anyone teach me how to achieve this.

Thanks.

jQuery().mailgun_validator can't find plugin

I am using this with rails. I am not sure it is because of Jquery version or different angular version...
I have load all the files into rails but still not work.

--update--
My fault, I included multiple jquery, and later jquery flushed the one which already load mailgun plugin.

How to forward the wizard to next form based on response from service?

Hi,
Thank you for the great wizard.
In my application i need to stop moving the wizard based on the response from the service.

i am unable to use the forward method in controller can you please help me to fix this problem.

Thanks in advance.

rcMailgunValid directive

There is two problems in the rcMailgunValid directive.

1. The mailgunStatus has no effect. it doesn't affect the scope.
2. In the inProgressWrapper function, the variable error_message is not declared. (it seams that is a copy/paste of the errorWrapper function that there it is the function parameter)

Version number needs bumping

Tried to get 0.0.9 today using bower and it said that it required version 1.0.8 of angular. It isn't pulling in the change to 1.*.

Add version info to files

Please add a version header to the js files.

form validate with multiple buttons or submits

Hi., I need to have multiple buttons or submits for the form with validation. you can assume as i need two button's 'save' and 'modify' on same form with validation on both buttons

Provide a Licence

Please consider providing a License for the code. At my company we are not allowed to include unlicensed code (PD, MIT, APL, LGPL is allowed)

jQuery referenced in source

Is jQuery required?

I spotted this in the source:

https://github.com/realcrowd/angularjs-utilities/blob/master/src/directives/rcSubmit.js#L34

But there is no mention of it as a dependency anywhere else (unless I've missed it)

Reference Files in bower.json

Thanks for making this available through bower. However, can you please add the following to bower.json?

"main": [
"src/directives/rcSubmit.js",
"src/directives/rcVerifySet.js",
"src/modules/rcDisabled.js",
"src/modules/rcForm.js",
"src/modules/rcMailgun.js",
"src/modules/rcWizard.js"
],

When we use build tools like Grunt, etc., they look for the "main" property to figure out which files are needed and where they're located.

rc disabled is not triggering when there is change in value

Angular js version - v1.2.7

var rcDisabledDirective = {
'rcDisabled': ['rcDisabled', function (rcDisabled) {
return {
restrict: 'A',
link: function (scope, element, attributes) {
scope.$watch(attributes.rcDisabled, function(isDisabled) {
rcDisabled.disable(element, isDisabled); // This is not getting triggered when there is change in submitInProgress value from false to true
});
}
}
}]
};