0.0.10 • Published 4 years ago
ng-auto-form-lib v0.0.10
NgAutoForm
An Angular component library for generating forms based on metadata definitions.
This library leans heavily on bootstrap (for styles), ngx-bootstrap (mostly for their date picker) and font-awesome (for icons).
You can head over to the official documentation page to see more example usage.
Getting Started
- Install NgAutoForm
npm install ng-auto-form
- Install peer dependencies.
npm install bootstrap ngx-bootstrap font-awesome.
- Update the "styles" section in angular.json for your project to include bootstrap and font-awesome.
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.css",
"node_modules/font-awesome/css/font-awesome.css"
]
- Import NgAutoForm in your app module.
import { NgAutoFormModule } from 'ng-auto-form';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
NgAutoFormModule.forRoot()
],
bootstrap: [AppComponent]
})
export class AppModule { }
- Use it in a component.
import { Component } from '@angular/core';
@Component({
selector: 'simple-example',
template: `
<af-form [formDefinition]="myFormDefinition" [(formData)]="myFormData" (formFieldDataChange)="onFormFieldChange($event)"></af-form>
<button class="btn btn-primary" (click)="printFormData()">Print Form Data</button>
`
})
export class SimpleExampleComponent {
myFormData = {
textField: 'This is some text',
numberField: 42,
listField: 'Orange'
};
myFormDefinition = {
layout: [['textField'], ['numberField', 'listField']],
fields: [
{
name: 'textField',
fieldType: 'Text',
label: 'Text Field Label'
},
{
name: 'numberField',
fieldType: 'Number',
label: 'Number Field Label'
},
{
name: 'listField',
fieldType: 'List',
label: 'List Field Label',
listOptions: ['Banana', 'Orange', 'Grape', 'Apple']
}
]
};
onFormFieldChange(formChangeData) {
console.log('onFormFieldChange() called!');
console.log(formChangeData);
}
printFormData(): void {
alert('Look at the console to view the form data that was printed to the console!');
console.log(this.myFormData);
}
}