A dynamic form generator using Typescript Decorators.
npm install @guihss/ngx-dynamic-formsA dynamic form generator using Typescript Decorators.
More info in Dynamic Forms.
The default components use Angular Material. Add with ng add @angular/material. Install the library ng add @guihss/ngx-dynamic-forms.
Annotate the class you want to generate the form.
``typescript`
export class User {
@FormInput({ label: "Name", type: "text" })
name = 'Bob';
@FormInput({ label: "Password", type: "password"})
password;
@FormInput({ label: "Email", type: "email"})
email;
}
Create an observable instance.
`typescript
export class AppComponent {
title = 'dynamic-forms-showcase';
user: Observable
}
`
Add the dynamic-forms component to your page.
`html
Example form
[objectObservable]="user"
>
`
And see the result :D
The inputs are rendered in the defined order and uses any values in the field as default.
You can access the data inserted in the form with.
`typescript`
class AppComponent {
/ ... /
@ViewChild(DynamicFormsComponent) dynamicForm: DynamicFormsComponent;
ngAfterViewInit(): void {
let formResult = this.dynamicForm.getResult();
}
}
The result is a json with field names equals to the annotated field.
Filled with the form values.
`javascript`
let formResult = {
name: 'Bob',
password: 'verysecurepassword',
email: ''
}
With dynamic forms you can use your own components.
ng generate component custom-input
Implement the ConfigurableInput interface.
`typescript
export class CustomInputComponent implements ConfigurableInput {
formControl = new FormControl();
applyArguments(args: any): any {
/* here you can use the args passed in the annotation
to configure your input. */
}
getFormControl(): any {
return this.formControl;
}
}
`
Use the @CustomInput annotation in your model.
`typescript
export class User {
/ ... /
@CustomInput(CustomInputComponent, {label: "Custom Input", args: {}})
myCustomInput;
}
`
The result:
!Custom Input
You can nest inputs with dynamic forms.
`typescript
export class NestedObject {
@FormInput({ label: "street", type: "text" })
street;
@FormInput({ label: "city", type: "text" })
city;
}
export class User {
/ ... /
@NestedInput('Address', / search depth / 1)
address = new NestedObject();
}
`
Result:
The form data are nested too.
`javascript``
let formResult = {
name: 'Bob',
password: 'verysecurepassword',
email: '',
myCustomInput: '',
address: {
street: '',
city: ''
}
}
Check the GitHub page.