open-index/open-npm huggingface dataset:
npm package: @ng-validators/ng-validators
Description: Angular native form validators
Author: https://github.com/anjmao
Latest version: 0.12.1

[![npm version](https://badge.fury.io/js/%40ng-validators%2Fng-validators.svg)](https://badge.fury.io/js/%40ng-validators%2Fng-validators)
[![Build Status][travis-badge]][travis-badge-url]


[travis-badge]: https://travis-ci.org/anjmao/ng-validators.svg?branch=master
[travis-badge-url]: https://travis-ci.org/anjmao/ng-validators

# Description

This repository contains native angular forms validators for both template driven and reactive forms.

Table of contents
=================

  * [Getting started](#getting-started)
    * [Template driven forms](#usage-in-template-driven-forms)
    * [Reactive forms](#usage-in-reactive-forms)
  * [Contributing](#contributing)
  
## Getting started

### Install library

using npm
```bash
npm install @ng-validators/ng-validators --save 
```
using yarn
```bash
yarn add @ng-validators/ng-validators
```

### Usage in reactive forms.
Import only validators you need for you form.

```ts
import { greaterThan } from '@ng-validators/ng-validators';

this.formBuilder.group({
    age: ['', greaterThan(18)]
});
```

### Usage in template driven forms.
Import NgValidatorsModule @NgModule declarations.

```ts
import { NgValidatorsModule } from '@ng-validators/ng-validators';

@NgModule({
    imports: [NgValidatorsModule]
})
export class AppModule {
}
```

Now you can use validator directive in HTML template
```html
<input class="form-control" type="text" ngModel name="gt" gt="10"/>
```


# Validators

## Angular built-in validators

- [x] required
- [x] minlength
- [x] maxlength
- [x] pattern

## Custom validators

- [x] rangeLength
- [x] min
- [x] gt
- [x] gte
- [x] max
- [x] lt
- [x] lte
- [x] range
- [x] digits
- [x] number
- [x] url
- [x] email
- [x] date
- [x] minDate
- [x] maxDate
- [x] dateISO
- [x] creditCard
- [x] json
- [x] base64
- [x] uuid
- [x] equal
- [x] notEqual
- [x] equalTo
- [x] notEqualTo
- [ ] Your validator can be here. PR is welcome :)

## Contributing

Contributions are welcome. You can start by looking at [issues](https://github.com/ng-validators/ng-validators/issues) with label *Help wanted*  or creating new Issue with proposal or bug report. If you need validator but it is not listed here, you can submit PR with your validator.

## License

MIT
npm package: @ng-vcl/json-editor
Description: A json-editor for ng-vcl
Author: The ng-vcl authors
Latest version: 0.4.0-12

# vcl-json-editor

A json-editor based on [jsoneditor](https://github.com/josdejong/jsoneditor).

## Installation

```sh
npm install @ng-vcl/json-editor --save
```

## Usage:

```javascript
import { VCLJsonEditorModule } from 'ng-vcl';

@NgModule({
  imports: [ VCLJsonEditorModule ],
  ...
})
export class AppComponent {}
```

```html
<vcl-json-editor [value]="myObject"></vcl-json-editor>
```

### API

#### vcl-json-editor properties:

Name      | Type   | Default | Description
--------- | ------ | ------- | -----------------------------------------------------------------------------------------------------------------------
`mode`    | string | 'tree'  | Editormode ENUM('tree','form','text','view')
`height`  | string | '250px' | height of the editor-window
`value`   | string | {}      | An Object to begin editing with
`options` | object | {}      | Any jsoneditor specific content. See [JSON-EDITOR-API](https://github.com/josdejong/jsoneditor/blob/master/docs/api.md)
npm package: @ng-vcl/store
Description: ng-vcl store
Author: The ng-vcl authors
Latest version: 0.3.19

# Store

## Installation

```sh
npm install @ng-vcl/store --save
```

## Usage

```js

import { NgModule } from '@angular/core';
import { StoreModule } from 'ng-vcl';
import { AppComponent } from './app.component';
import { REDUCERS } from './reducers';
import { EFFECTS } from './effects';

@NgModule({
  imports: [
    StoreModule.forRoot({
      enableRouter: true, // enables the StoreRouter 
      reducers: [ ... ],  // optional - Your reducers
      effects: [ ... ]    // optional - Effect classes
    })
  ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }
```


### Reducers

```js

export const initialState: BooksState = {
  loading: false,
  books: [],
  error: null
};

export class SearchBooksAction {
  constructor(public query: string) {}
}

export class SearchBooksCompleteAction {
  constructor(public books: any[]) {}
}

export class SearchBooksErrorAction {
  constructor(public error: any) {}
}

function bookReducer(state = initialState, action: SearchBooksAction | SearchBooksCompleteAction | SearchBooksErrorAction) {
  if (action instanceof SearchBooksAction) {
    return {
      loading: true,
      books: [],
      error: null
    };
  } else if (action instanceof SearchBooksCompleteAction) {
    return {
      loading: false,
      books: [...action.books],
      error: null
    };
  } else if (action instanceof SearchBooksErrorAction) {
    return {
      loading: false,
      books: [],
      error: action.error
    };
  }
  return state;
}

export const BOOK_REDUCERS = {
  books: bookReducer
}

```

### Store


```js
@Injectable()
export class BooksService {

  constructor(
    private store: Store,
  ) { }

  books$ = this.store.select<BooksState>(state => state.books);

  public search(query: string) {
    this.store.dispatch(new SearchBooksAction(query));
  }
}
```

### Effects

```js
@Injectable()
export class BooksEffects {
  constructor(
    private actions$: StoreActions,
    private http: Http
  ) { }

  @Effect()
  search = this.actions$
               .ofType(SearchBooksAction)
               .switchMap( ({query}) => {
                return this.http.get(`${API}?q=${query || ''}`)
                            .map(res => res.json())
                            .map(result => result.items)
                            .map(items => {
                              return new SearchBooksCompleteAction(items);
                            })
                            .catch(err => {
                              return Observable.of(new SearchBooksErrorAction(err));
                            });
              });
}
```
npm package: @ng-vcl/webpack-helper
Description: Helper for VCL support in Angular CLI
Author: n-fuse GmbH
Latest version: 0.2.1

# webpack-helper

Extends the Angular CLI webpack config with vcl support.

## Requirements / Installation

- @vcl/preprocessor: ^0.6.0
- css-loader: ^3.2.0
- webpack-merge: ^4.2.2

```sh
npm install @vcl/preprocessor webpack-merge css-loader --save-dev
```

```sh
$ npm install @vcl/preprocessor webpack-merge css-loader @ng-vcl/webpack-helper --save-dev
```

## Usage

For this example we use [ngx-build-plus](https://github.com/manfredsteyer/ngx-build-plus) and webpack-merge to add vcl support to the angular cli webpack config.
Check the ngx-build-plus docs for information how to use a plugin.

```js
const webpackHelpers = require('@ng-vcl/webpack-helper');
const merge = require('webpack-merge');

module.exports.default = {
  opts: null,

  pre(builderConfig) {
    this.opts = {
      sourceMap: builderConfig.options.sourceMap, // Use settings from builder
      extractCSS: builderConfig.options.extractCss // Use settings from builder
    };
  },

  config(cfg) {
    return merge(cfg, webpackHelpers(this.opts));
  }
};
```

#### Options

- extractCSS [false] - Extract css into seperate file
- sourceMap [false] - Generate a source map
- globalStyle ['src/styles.sss'] - Path to global style(s). Can be array or string.
- root [process.cwd()] - Base directory
- fa [false] - Enable @vcl/font-awesome path fix
- mdi [false] - Enable @vcl/mdi path fix
npm package: @ng-vim/devtools
Description: A schematics to integrate husky with prettier and commitlint in your angular workspace
Author: Vimal Patel
Latest version: 1.1.0


<p align="center">
 <img width="30%" height="30%" src="./logo.png">
</p>

# @ng-vim/devtools
A schematic to integrate husky, prettier and commit-lint in your angular application

<p align="left">
  <a href="https://www.npmjs.com/package/@ng-vim/devtools">
    <img src="https://img.shields.io/npm/v/@ng-vim/devtools/latest.svg" alt="NPM Version" />
  </a>
  <a href="https://www.npmjs.com/package@ng-vim/devtools">
    <img src="https://img.shields.io/npm/dm/@ng-vim/devtools.svg" alt="Monthly download on NPM" />
  </a>
</p>


## 🌟 Install

```sh
$ ng add @ng-vim/devtools
```


Running above schematics in your angular application will integrate below functionality.
1. Auto format your staged files before commiting using prettier configuration
1. Make sure your commit messages are per commitlint standard.

<br/>


After this whenever you will try to perform any git actions like `git commit` and `git push`, husky command will be executed for the respective commands.

## Troubleshoot
If you are using Linux/Max operating system you need to give execution permission to `.husky` and `.git/hooks` folder.
```sh
chmod ug+x .husky/*
chmod ug+x .git/hooks/*
```


## Husky Documentation
https://typicode.github.io/husky



## License

The MIT License (MIT)