Example Setups
Single Form
HTML Setup Example
- An example for how to set up a single form in html:
vaccines/add/add.component.html
<app-myform instanceName="Vaccine @name#" name="vac" [enableAddAnother]="true" [extraFields]="extra_fields"
[formItems]="formItems" [url]="url" (onValidatedData)="onValidatedData($event)" [submitButtonText]="'Vaccine'"
[formGroupOrder]="formGroupOrder" [hideButtons]=false [instance]="instance"
(onPostedData)="onVaccineCreated($event)">
</app-myform>
TS Setup Example
- An example for how to set up a single form in typescript:
vaccines/add/add.component.ts
import { Component, OnInit } from '@angular/core';
import { MyFormSection } from '@sisitech/myform';
import { FormControl, FormGroup } from '@angular/forms';
import { filterOptions } from '../options';
import { ActivatedRoute, Router } from '@angular/router';
import { Subscription } from 'rxjs/internal/Subscription';
@Component({
selector: 'app-add',
templateUrl: './add.component.html',
styleUrls: ['./add.component.scss']
})
export class AddComponent implements OnInit {
title = "Add New Vaccine"
subtitle = "Add new vaccine details in the form below"
buttonText = "New Vaccine"
buttonLink = "/vaccines/add"
instance: any
routeParamSub?: Subscription;
routeSub?: Subscription;
actionName: string = "Add"
constructor(private route: ActivatedRoute, private router: Router) {
this.routeParamSub = this.route.queryParams.subscribe(params => {
if (this.router.getCurrentNavigation()?.extras.state) {
const instance = this.router.getCurrentNavigation()?.extras.state;
if (instance?.hasOwnProperty("id")) {
// this.setIntance(instance)
this.providedInstance = instance
}
}
})
this.routeSub = this.route.params.subscribe(params => {
console.log(params);
this.id = params['id'];
if (this.id) {
this.actionName = "Update"
this.title = this.actionName + " Vaccine Details"
this.subtitle = this.actionName + " vaccine details in the form below"
this.section1.subTitle = this.actionName + " vaccine details"
}
});
}
ngOnDestroy(): void {
this.routeParamSub?.unsubscribe()
this.routeSub?.unsubscribe()
}
ngOnInit(): void {
this.formGroup.valueChanges.subscribe(res => {
console.log(res)
})
}
collapseFilters = false
formItems: any = filterOptions;
validateOnly = true
url: string = "api/v1/vaccines/"
extra_fields: any
originalInstance: any
providedInstance: any
id: any = ""
section1: MyFormSection = {
title: "Vaccine Details",
subTitle: " vaccine details",
formGroupOrder: [
[
'name',
'organization'],
['description']
]
}
formGroupOrder = [
this.section1
]
formGroup = new FormGroup({
search: new FormControl("")
})
setIntance(new_instance: any) {
console.log("Setting instance");
this.instance = new_instance
console.log(this.instance)
// this.id = new_instance.id
}
onVaccineCreated(patient: any) {
console.log(patient)
window.history.back();
}
formChanges(form: any) {
console.log(form)
}
onValidatedData(data: any) {
console.log(data)
}
}
Final Output
- The final form will be served as follows:
Multi-Form
HTML Setup Example
- An example for how to set up a multi-step form in html:
vaccines/add/add.component.html
<sistch-multistep-form [instance]="instance" (onPostedData)="onPatientCreated($event)" [options]="multistepForm">
</sistch-multistep-form>
TS Setup Example
- An example for how to set up a multi form in typescript:
import { Component, OnDestroy, OnInit } from '@angular/core';
import { filterOptions } from './enroll_options';
import { options } from './options';
import { FormControl, FormGroup } from '@angular/forms';
import { MutliStepForm, MyFormSection } from '@sisitech/myform';
import { ActivatedRoute, Router } from '@angular/router';
import { Subscription } from 'rxjs/internal/Subscription';
import { PreviousRouteService } from '@sisitech/utils';
@Component({
selector: 'app-add-patient',
templateUrl: './add-patient.component.html',
styleUrls: ['./add-patient.component.scss']
})
export class AddPatientComponent implements OnInit, OnDestroy {
title = "New Patient"
subtitle = "New patient details in the form below"
buttonText = "New Patient"
buttonLink = "/patients/add"
instance: any
routeParamSub?: Subscription;
routeSub?: Subscription;
actionName: string = "Add"
constructor(private route: ActivatedRoute, private router: Router,
private previousService: PreviousRouteService,
) {
this.routeParamSub = this.route.queryParams.subscribe(params => {
if (this.router.getCurrentNavigation()?.extras.state) {
const instance = this.router.getCurrentNavigation()?.extras.state;
if (instance?.hasOwnProperty("id")) {
// this.setIntance(instance)
this.providedInstance = instance
}
}
})
this.routeSub = this.route.params.subscribe(params => {
console.log(params);
this.id = params['id'];
if (this.id) {
this.actionName = "Update"
this.section1.subTitle = this.actionName + " patient's name, gender and more personal information"
this.section2.subTitle = this.actionName + " parent or guardian details"
this.title = this.actionName + " Patient"
this.subtitle = this.actionName + " patient details in the form below"
}
});
}
ngOnDestroy(): void {
this.routeParamSub?.unsubscribe()
this.routeSub?.unsubscribe()
}
ngOnInit(): void {
console.log(this.previousService.getPreviousUrl())
console.log(this.previousService.getCurrentsUrl())
this.formGroup.valueChanges.subscribe(res => {
console.log(res)
})
}
filterOptions: any = filterOptions
collapseFilters = false
filterGroupOrder = [
['grouping', 'paginator'],
['region', 'district', 'gender'],
['school', 'base_class', 'status']
]
formItems: any = options;
validateOnly = true
url: string = "api/v1/patients/"
extra_fields: any
originalInstance: any
id: any = ""
providedInstance: any
formGroupOrder = [
['first_name', 'middle_name', 'last_name'],
['phone', 'streams'],
['sms']
]
section1: MyFormSection = {
title: "Personal Details",
subTitle: this.actionName + " patient's name, gender and more personal information",
formGroupOrder: [
['first_name', 'middle_name', 'last_name'],
['dob', 'gender'],
]
}
section2: MyFormSection = {
title: "Parent / Guardian Details",
subTitle: this.actionName + " parent or guardian details",
formGroupOrder: [
['guardian_name', 'guardian_email', 'guardian_phone'],
['sub_county', 'guardian_relationship']
]
}
section3: MyFormSection = {
title: "Health Professional’s Declaration",
subTitle: "I certify that the information I have provided in this form is true and correct. I have obtained proof of the vaccination(s) given.",
formGroupOrder: [
['medical_license_number'],
['i_have_read']
]
}
sectionFormGroup: MyFormSection[] = [
this.section1, this.section2
]
multistepForm: MutliStepForm = {
url: "api/v1/patients/",
options: options,
submitButtonText: "Patient",
forms: [
{
stepTitle: "Personal Details",
sections: [this.section1]
},
{
stepTitle: "Parent / Guardian Details",
sections: [this.section2]
},
{
stepTitle: "Health Professional’s Declaration",
sections: [this.section3]
},
]
}
formGroup = new FormGroup({
search: new FormControl("")
})
setIntance(new_instance: any) {
console.log("Setting instance");
// new_instance.sub_county = [2, 1]
this.instance = new_instance
console.log(this.instance)
// this.id = new_instance.id
}
onValidatedData(data: any) {
console.log(data)
}
onPatientCreated(patient: any) {
console.log(patient)
if (patient && patient.alert_notification) {
patient.alert_notification.message = "Patient Id: @id - @full_name @action#"
}
// window.history.back();
// console.log(this.previousService.getPreviousUrl())
this.router.navigate([this.previousService.getPreviousUrl()], { state: patient })
}
formChanges(form: any) {
console.log(form)
}
}
Final Output
- The final form will be served as follows:
Useful Links
- Overview: Introduction to myForms.
- Getting Started: Learn how to install and set up Sisitech Forms in your project.
- Usage: Discover how to create, customize, and work with forms using our library.
- Under the Hood: Dive into the details of the library's functions, classes, and components.
- Examples: See real-world examples of Sisitech Forms in action.
- FAQs: Find answers to common questions and troubleshooting tips.