Skip to content

Commit

Permalink
readme improvements and a minor bug fix
Browse files Browse the repository at this point in the history
* readme add description of updateOn option
* readme add disadvantage and overcoming of it
* readme angular 2 is not **tested**
* infinite-loop of twin upperCase and lowerCase directives bug fixed
  • Loading branch information
Changyu Geng committed Jul 13, 2018
1 parent 39e4dba commit dfd500f
Show file tree
Hide file tree
Showing 11 changed files with 52 additions and 10 deletions.
18 changes: 18 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,24 @@ Compatible with Chrome, Safari, Edge & IE. Test status [![BrowserStack Status](h

Manually tested in Firefox.

## Package 2. ngx-upper-case-directive

> This directive helps to convert an input text value to upper case.
[Readme](projects/ngx-upper-case-directive/README.md)

## Package 3. ngx-lower-case-directive

> This directive helps to convert an input text value to lower case.
[Readme](projects/ngx-lower-case-directive/README.md)

## Package 4. ngx-cleave-directive

> This directive integrates cleave.js into Angular Form.
[Readme](projects/ngx-cleave-directive/README.md)

## Development & Contribution

This project was generated with [Angular CLI](/~https://github.com/angular/angular-cli) version 6.0.3.
Expand Down
8 changes: 7 additions & 1 deletion projects/ngx-cleave-directive/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,13 @@ This directive integrates cleave.js into Angular Form.

It lies on a simple fact that *Angular listens to `input` event to bring the view-to-model binding into being*.

The directive works with Angular 5 and 6. To use it in Angular 4, you may import the .ts file directly (see *Usage*). For Angular 2, you may try it in Angular 4's way, but it's not guaranteed to work.
_* According to the description of [updateOn property of AbstractControlOptions interface](https://angular.io/api/forms/AbstractControlOptions), when updateOn is set to `blur` or `submit`, Angular listens to `blur` or `submit` event for model update. In this directive, `update-on-blur` case is handled in a hack way. No further processing is required for `update-on-submit` case._

Since extra `input` and `blur` events are dispatched, if you bind a callback to `input` event or `blur` event, the callback will be invoked twice on `input` or `blur`.

To overcome the disadvantage, a debounced function is recommended for the event binding.

The directive works with Angular 5 and 6. To use it in Angular 4, you may import the .ts file directly (see *Usage*). For Angular 2, you may try it in Angular 4's way, but it's not tested.


## Usage
Expand Down
2 changes: 1 addition & 1 deletion projects/ngx-cleave-directive/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "ngx-cleave-directive",
"version": "1.0.2",
"version": "1.0.3",
"author": "KingMario <gcyyq@hotmail.com>",
"license": "MIT",
"bugs": {
Expand Down
8 changes: 7 additions & 1 deletion projects/ngx-lower-case-directive/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,13 @@ This directive helps to convert an input text value to lower case.

It lies on a simple fact that *Angular listens to `input` event to bring the view-to-model binding into being*.

The directive works with Angular 5 and 6. To use it in Angular 4, you may import the .ts file directly (see *Usage*). For Angular 2, you may try it in Angular 4's way, but it's not guaranteed to work.
_* According to the description of [updateOn property of AbstractControlOptions interface](https://angular.io/api/forms/AbstractControlOptions), when updateOn is set to `blur` or `submit`, Angular listens to `blur` or `submit` event for model update. In this directive, `update-on-blur` case is handled in a hack way. No further processing is required for `update-on-submit` case._

Since extra `input` and `blur` events are dispatched, if you bind a callback to `input` event or `blur` event, the callback will be invoked twice on `input` or `blur`.

To overcome the disadvantage, a debounced function is recommended for the event binding.

The directive works with Angular 5 and 6. To use it in Angular 4, you may import the .ts file directly (see *Usage*). For Angular 2, you may try it in Angular 4's way, but it's not tested.


## Usage
Expand Down
2 changes: 1 addition & 1 deletion projects/ngx-lower-case-directive/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "ngx-lower-case-directive",
"version": "1.0.1",
"version": "1.0.2",
"author": "KingMario <gcyyq@hotmail.com>",
"license": "MIT",
"bugs": {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import {
} from '@angular/core';

@Directive({
selector: 'input[lowerCase]',
selector: 'input[lowerCase]:not([upperCase])',
})
export class NgxLowerCaseDirective {

Expand Down
8 changes: 7 additions & 1 deletion projects/ngx-trim-directive/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,13 @@ This directive helps to trim whitespaces of an input text value.

It lies on a simple fact that *Angular listens to `input` event to bring the view-to-model binding into being*.

The directive works with Angular 5 and 6. To use it in Angular 4, you may import the .ts file directly (see *Usage*). For Angular 2, you may try it in Angular 4's way, but it's not guaranteed to work.
_* According to the description of [updateOn property of AbstractControlOptions interface](https://angular.io/api/forms/AbstractControlOptions), when updateOn is set to `blur` or `submit`, Angular listens to `blur` or `submit` event for model update. In this directive, `update-on-blur` case is handled in a hack way. No further processing is required for `update-on-submit` case._

Since extra `input` and `blur` events are dispatched, if you bind a callback to `input` event or `blur` event, the callback will be invoked twice on `input` or `blur`.

To overcome the disadvantage, a debounced function is recommended for the event binding.

The directive works with Angular 5 and 6. To use it in Angular 4, you may import the .ts file directly (see *Usage*). For Angular 2, you may try it in Angular 4's way, but it's not tested.


## Usage
Expand Down
2 changes: 1 addition & 1 deletion projects/ngx-trim-directive/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "ngx-trim-directive",
"version": "1.0.1",
"version": "1.0.2",
"author": "KingMario <gcyyq@hotmail.com>",
"license": "MIT",
"bugs": {
Expand Down
8 changes: 7 additions & 1 deletion projects/ngx-upper-case-directive/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,13 @@ This directive helps to convert an input text value to upper case.

It lies on a simple fact that *Angular listens to `input` event to bring the view-to-model binding into being*.

The directive works with Angular 5 and 6. To use it in Angular 4, you may import the .ts file directly (see *Usage*). For Angular 2, you may try it in Angular 4's way, but it's not guaranteed to work.
_* According to the description of [updateOn property of AbstractControlOptions interface](https://angular.io/api/forms/AbstractControlOptions), when updateOn is set to `blur` or `submit`, Angular listens to `blur` or `submit` event for model update. In this directive, `update-on-blur` case is handled in a hack way. No further processing is required for `update-on-submit` case._

Since extra `input` and `blur` events are dispatched, if you bind a callback to `input` event or `blur` event, the callback will be invoked twice on `input` or `blur`.

To overcome the disadvantage, a debounced function is recommended for the event binding.

The directive works with Angular 5 and 6. To use it in Angular 4, you may import the .ts file directly (see *Usage*). For Angular 2, you may try it in Angular 4's way, but it's not tested.


## Usage
Expand Down
2 changes: 1 addition & 1 deletion projects/ngx-upper-case-directive/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "ngx-upper-case-directive",
"version": "1.0.1",
"version": "1.0.2",
"author": "KingMario <gcyyq@hotmail.com>",
"license": "MIT",
"bugs": {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import {
} from '@angular/core';

@Directive({
selector: 'input[upperCase]',
selector: 'input[upperCase]:not([lowerCase])',
})
export class NgxUpperCaseDirective {

Expand Down

0 comments on commit dfd500f

Please sign in to comment.