npm package: @mylabz/ng-forms-aio
Description: A library of Angular UI components, made to make managing forms easier. All components are open source and free to use under MIT license.
Latest version: 14.0.5

# **@mylabz/ng-forms-aio**

A library of Angular UI components, made to make managing forms easier.
All components are open source and free to use under MIT license.


**DEMO**: https://ng-forms-aio.mylabz.xyz/

**GLOBAL DOC**: https://ng-forms-aio.mylabz.xyz/#/doc/forms-aio

**COMPONENT DOC**: https://ng-forms-aio.mylabz.xyz/#/components/forms-aio

**NPM**: https://www.npmjs.com/package/@mylabz/ng-forms-aio

## **Dependencies**

Latest version available for each suported version of Angular

| @mylabz/ng-forms-aio | Angular   |
| -------------------- | --------- |
| 13.x                 | 13.x      |
| 14.x                 | 14.x      |

## **Features**

- Use simple JSON as input.
- 15 Themes ready to use.
- Easy provided custom feedbacks.
- Use <a  href='https://getbootstrap.com/docs/4.0/layout/grid'>Bootstrap Grid System.</a> to combine fields
- 3 Events to listen (onChange onCreate onSubmit).
- Angular <a href='https://angular.io/api/forms/FormControl'>FormControl</a> for custom validations.
- Easy listening old and new values.
- Typed for <a  href='https://code.visualstudio.com/docs/editor/intellisense'>vscode Autocompletion.</a>
- Debug mode provided.
- No collision in case of many forms.
- No other dependency.

## **Environment Support**

- Modern browsers, [Browser support](https://angular.io/guide/browser-support)
- Server-side Rendering
- [Electron](https://electron.atom.io/)


## **Installation**

### **npm**

```bash
$ npm install @mylabz/ng-forms-aio
```

### **yarn**

```bash
$ yarn add @mylabz/ng-forms-aio
```

### **@angular/cli**

**We recommend using `@angular/cli` to install**，it not only makes development easier，but also allow you to take advantage of the rich ecosystem of angular packages and tooling.

```bash
$ ng new PROJECT_NAME
$ cd PROJECT_NAME
$ ng add @mylabz/ng-forms-aio
```

> More information about `@angular/cli` [here](https://github.com/angular/angular-cli).


## Schematics

## Setup project with ng-add

<video autoplay loop muted  src="https://user-images.githubusercontent.com/75882457/199261498-7e414bbf-dfb7-4932-804d-aaf6db99f130.mp4"> </video>

Will install @mylabz/ng-forms-aio to your project, and suggest a template who will edit the `app.module.ts` to add the `NgFormsAioModule`, create a template into `app.component.html`, add somes style to `app.component.scss` and add logic to `app.component.ts`.

Use **skip** if you don't want a template generation.

```bash
$ ng add @mylabz/ng-forms-aio
```

## Only Generate demo template

Into an existing project, simple run

```bash
$ ng g @mylabz/ng-forms-aio:demo
```

## Companies using ng-forms-aio

## Project using ng-forms-aio


## Browsers support

| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari-ios/safari-ios_48x48.png" alt="iOS Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>iOS Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/samsung-internet/samsung-internet_48x48.png" alt="Samsung" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Samsung | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Opera |
| --------- | --------- | --------- | --------- | --------- | --------- | --------- |
| IE11, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions

-----
<p>Made with ❤ by <a href="https://github.com/mylabz-xyz">MyLabz</a> Team</p>