Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/recursyve/ngx-form-generator
https://github.com/recursyve/ngx-form-generator
Last synced: 4 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/recursyve/ngx-form-generator
- Owner: Recursyve
- Created: 2019-04-14T16:58:52.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-06-02T17:21:07.000Z (6 months ago)
- Last Synced: 2024-10-13T23:46:54.866Z (about 1 month ago)
- Language: TypeScript
- Size: 1.97 MB
- Stars: 2
- Watchers: 4
- Forks: 0
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# NgxFormGenerator
NgxFormGenerator is an Angular ReactiveForms helper that will make your form cleaner and safer.
## Installation
```
npm install --save @recursyve/ngx-form-generator
```
## Usage example
NgxFormGenerator will generate an implementation of FormGroup for you. We use decorators to describe our FormGroup.
```typescript
import { Control } from "@recursyve/ngx-form-generator"
class TestForm {
@Control()
example: string;
@Control()
date: Date;
@Control()
year: number;
}
```
This will generate a FormGroup that is equivalent to this FormBuilder example
```typescript
const group = builder.group({
example: [''],
date: [null],
year: [null]
});
```
If you want to use validators on your controls, you can add them on top of each property
```typescript
import { Control, Required } from "@recursyve/ngx-form-generator"
class TestForm {
@Control()
@Required()
example: string;
@Control()
@Required()
date: Date;
@Control()
@Required()
year: number;
}
```
The next step is load TestForm in your module
```typescript
@Module({
import: [
BrowserModule,
NgxFormGeneratorModule.forFeature([
{
provide: "Test",
useValue: TestForm
}
]),
]
})
class AppModule {
}
```
You can now load your generated FormGroup in your component
```typescript
@Component({
selector: "app-root",
templateUrl: "app.template.html"
})
class AppCompnent {
constructor(@Inject("Test") public formGroup: GeneratedFormGroup) {}
}
```
You can also provide your form directly in the components
```typescript
@Component({
selector: "app-root",
templateUrl: "app.template.html",
providers: NgxFormGeneratorProvider.forFeature([TestForm])
})
class AppCompnent {
constructor(public formGroup: GeneratedFormGroup) {}
}
```
GeneratedFormGroup is an implementation of FormGroup. Everything that you used to do with a FormGroup will still work.