# material-smart-form

> This library is supposed to help developers make forms fast and easy. It is useful specially for admin dashboards in which customizing UI is not that imoportant.

Latest version **0.0.21** (published 2020-09-06) · 0 weekly downloads

## Install

```sh
npm install material-smart-form
pnpm add material-smart-form
yarn add material-smart-form
bun add material-smart-form
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.21 |
| Published | 2020-09-06 |
| First published | 2020-04-06 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 1.3 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Maintainers | poormohammadi |

## Links

- npm: https://www.npmjs.com/package/material-smart-form
- Repository: https://github.com/poormohammadi/ng-smart-form
- Homepage: https://github.com/poormohammadi/ng-smart-form#readme
- Issues: https://github.com/poormohammadi/ng-smart-form/issues
- npm.io page: https://npm.io/package/material-smart-form

## Recent versions

- 0.0.21 (latest) — 2020-09-06
- 0.0.20 — 2020-09-01
- 0.0.19 — 2020-09-01
- 0.0.18 — 2020-08-11
- 0.0.17 — 2020-06-21
- 0.0.16 — 2020-06-21
- 0.0.15 — 2020-06-21
- 0.0.14 — 2020-06-15
- 0.0.13 — 2020-06-15
- 0.0.12 — 2020-05-31
- 0.0.11 — 2020-05-02
- 0.0.10 — 2020-04-26
- 0.0.9 — 2020-04-26
- 0.0.8 — 2020-04-26
- 0.0.7 — 2020-04-26
- … 6 more at https://npm.io/package/material-smart-form/versions

## README

# Angular Material Smart Form

This library is supposed to help developers make forms fast and easy. It is useful specially for admin dashboards in which customizing UI is not that imoportant.

## Get Started

install the package

`npm install material-smart-form --save`

import the module in your own module.

```ts
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, BrowserAnimationsModule, MaterialSmartFormModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}
```

## Usage

The simplest usage of this component could be so:

in you component's template file:

```html
<ng-smart-form
  [schema]="formSchema"
  [values]="values"
  [isSubmitting]="isSubmitting"
  (formSubmit)="submit($event)"
>
</ng-smart-form>
```

and in your component:

```ts
isSubmitting: boolean;

formSchema: FormSchema = {
	name: {
		type: FormFieldTypes.Text,
	},
}

values: {
	name: 'John',
}

submit(values: {name: string}) {
  this.isSubmitting = true;
  setTimeout(() => {
    this.isSubmitting = false;
  }, 2000);
}
```

## Demo

```
git clone https://github.com/poormohammadi/ng-smart-form.git
cd ng-smart-form
npm i
npm start
```

---
_Source: https://npm.io/package/material-smart-form · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._