https://github.com/toddmotto/switch-messages

switchMessages for Angular 1.2+, partial functionality from Angular 1.3+ "ngMessages"
https://github.com/toddmotto/switch-messages

Last synced: 11 days ago
JSON representation

switchMessages for Angular 1.2+, partial functionality from Angular 1.3+ "ngMessages"

• Host: GitHub
• URL: https://github.com/toddmotto/switch-messages
• Owner: toddmotto
• License: other
• Created: 2015-06-28T21:21:08.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2015-06-28T22:27:25.000Z (over 9 years ago)
• Last Synced: 2024-10-11T08:10:39.682Z (29 days ago)
• Language: JavaScript
• Homepage:
• Size: 98.6 KB
• Stars: 24
• Watchers: 4
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# switch-messages.js

switchMessages for Angular 1.2+. switchMessages backports partial functionality from Angular 1.3+ `ngMessages` Directive, making it available for use in 1.2.x releases and weighs <1KB. switchMessages parses the current validation state of the `$error` Object to enable dynamic toggling of relevant validation messages.

> [Working jsFiddle example](http://jsfiddle.net/toddmotto/vfu3jde2)

#### Usage

Include `switch-messages.js` in your AngularJS application as a dependency:

```js

angular.module('app', [

  'switchMessages'

]);

```

Use the Directive for validation messages based off AngularJS form `$error` states that your version supports, things such as `$error.invalid` and `$error.minlength`, depending on which `ng-*` Directives you are using to validate the current input's state.

Use the `name` attribute on a form, then nested `name` attributes for each field you need validation, then pass that Object into `switch-messages=""` and let it go to work, it's as simple as that.

```html

  

  


    
Username too short

    
This field is required

    
Username too long

  

  

  


    
Must be a valid email

  


```

## Styling

You can add any classes you want to `switch-messages` and `switch-message`, by default switchMessages adds `.switch-messages` and `.switch-message` class to relevant Directives at runtime to aid component styling:

```html



  
Username too short

  
This field is required

  
Username too long



```


## Installing with Bower

```

bower install https://github.com/toddmotto/switch-messages.git

```

## Manual installation

Ensure you're using the files from the `dist` directory (contains compiled production-ready code). Ensure you place the script before the closing `

  

  

  

  

  angular.module('app', [

    'switchMessages'

  ]);