https://github.com/therealkoedev/automatic-form-builder
https://github.com/therealkoedev/automatic-form-builder
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/therealkoedev/automatic-form-builder
- Owner: TheRealKoeDev
- License: mit
- Created: 2021-02-13T19:14:52.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2021-03-02T19:52:24.000Z (over 4 years ago)
- Last Synced: 2024-10-21T16:57:33.457Z (8 months ago)
- Language: TypeScript
- Size: 639 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# AutomaticFormBuilder
Automates [@angular/forms](https://www.npmjs.com/package/@angular/forms) form creation,
by interpreting the ValidationMetadata from [class-validator](https://www.npmjs.com/package/class-validator).
It requires the PeerDependencies of @angular/core, @angular/forms, class-transformer and class-validator to be installed to work.
#### Installation
##### npm via git
- npm install `git+https://github.com/TheRealKoeDev/automatic-form-builder.git` @angular/core @angular/forms class-validator class-transformer
## Usage
Imports
```typescript
import { FormGroup } from '@angular/forms';
import {
AutomaticFormBuilder,
FormBuildMode,
MissingArrayHandling,
MissingObjectHandling
} from 'automatic-form-builder'
import {
IsArray,
IsNotEmpty,
IsString,
ValidateNested
} from "class-validator";
import {
Type
} from "class-transformer";
```
Classes for Usage-Example
```typescript
class ChildClass {
@IsString()
public testPropety: string;
}
class ParentClass {
// Does not build this property, because it has no Decorator from class-validator
public unbuildProperty: unknown;
@IsString()
public primitiveProperty: string;
@IsArray()
@IsString({ each: true })
public primitiveArrayProperty: string[];
@IsNotEmpty()
@ValidateNested()
@Type(() => ChildClass)
public objectProperty: ChildClass;
@ValidateNested({ each: true })
@IsArray()
@Type(() => ChildClass)
public objectArrayProperty: ChildClass[];
}
```
```typescript
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
public form: FormGroup
public constructor(automaticFormBuilder: AutomaticFormBuilder){
// Builds the whole FormGroup
this.form = automaticFormBuilder.build(ParentClass);
// Builds the whole FormGroup with the provided data
this.form = automaticFormBuilder.build(ParentClass, { primitiveProperty: 'some text' });
/**
* Builds the FormGroup for ParentClass with only the control for 'primitiveProperty'
**/
this.form = automaticFormBuilder.build(ParentClass, { primitiveProperty: 'some other text' }, {
formBuildMode: FormBuildMode.ProvidedDataOnly
});
/**
* Builds the FormGroup for ParentClass with all direct child controls,
* and writes a FormControl with value null, for ChildArrays and ChildObjects that are not provided in the data.
**/
this.form = automaticFormBuilder.build(ParentClass, { }, {
formBuildMode: FormBuildMode.ProvidedObjectsOnly,
missingObjectHandling: MissingObjectHandling.WriteNull,
missingArrayHandling: MissingArrayHandling.WriteNull
});
}
}
```
#### Notes
- You can also specify a custom internal FormBuilder via the token `FORM_BUILDER_TOKEN` if you want to use the builder from [@ng-stack/forms](https://www.npmjs.com/package/@ng-stack/forms) for example.