0.0.2 • Published 5 years ago
@epsidev/helios v0.0.2
Basic Overview
Helios is a Angular library for building powerful and customizable forms with just a Typescript object. Helios provides support for generics, multiple CSS frameworks, HTTP requests and many more features
Features
- Typescipt Generics Support - Don't lose control over your data types
- Graphical customization - Modify almost any aspect of how looks your form. From CSS framework suppor to embbed custom elements on every input field
- Based on Angular Reactive Forms - Never worry again to use the long syntax of Angular Reactive Forms, Helios handle it for you
- Wide variety of Hooks - You need to transform your data before or after a submit? No problem
- Everything is Reactive - From hooks to submiting
- Integrate seamlessly with @epsidev/dionisio - Helios is one of the base for Dionisio and Prometheus libraries
- Bootstrap 4 support - Integrate Helios with Bootstrap 4 out of the box
Installation
npm i @epsidev/helios --save
Then add
HeliosModule
into your app.module.ts file
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HeliosModule } from '@epsidev/helios';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HeliosModule
],
providers: [ ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Usage
In your template do:
<helios-form [config]="heliosConfig" (submit)="onSubmit" (error)="onError"></helios-form>
And in your .ts file create the heliosConfig object
import { Component } from '@angular/core';
import { HeliosSmartFormConfig, HeliosError, HeliosSmartFormTypes } from '@epsidev/helios'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
public heliosConfig: HeliosSmartFormConfig<LoginData> = {
id: 'helios-test-form',
fields: [
{
label: 'Email',
placeholder: 'Enter your email',
name: 'email',
type: HeliosSmartFormTypes.Email,
validators: [
Validators.required,
Validators.email,
]
},
{
label: 'Email',
placeholder: 'Enter your password',
name: 'password',
type: HeliosSmartFormTypes.Password,
validators: [
Validators.required
]
},
]
}
onSubmit(loginData: LoginData) {
console.log(loginData)
}
onError(error: HeliosError) {
console.log('LOGIN ERROR', error.description)
}
}
interface LoginData {
email: string
password: string
}
How to Patch Form Data
Add a Template Reference Variable in your HTML
<helios-smart-form #testForm [config]="config" (heliosSubmit)="onSubmit($event)"></helios-smart-form>
Then use the @ViewChild() decorator to get the Form reference
@ViewChild('testForm') private form: SmartFormComponent
Now you have access to the SmartForm public methods like "pathData"
this.form.patchData({someField: 'Some data'})