SunbirdEd Forms
Contains Form component powered by angular. This component expects a configuration and renders form according to the view.
Criteria
Info
Current Release Branch
release-4.4.0
NPM Published version (Latest)
0.0.14
NPM Package Name
@project-sunbird/form-service
Works
In Angular Projects Only

Getting Started

Step 1: Install the package

1
npm install common-form-elements --save
Copied!

Step 2: Include the library selector in view( Eg .HTML file)

<sb-form [config]='config'>

step3: Form component emits values on every input , To get value include event callbacks

1
<sb-form (valueChanges)="function($event)" (statusChanges)="function($event)" >
Copied!
​

Steps to Integrate the form

Please refer following link for sample config
The Form Can render following elements:
  • Text Box
  • Text Area
  • Drop Down (Single)
  • Multi Select Drop Down
Drop Down Data Sources: Drop Down can be provided with multiple types of Data Sources:
  • Static List
  • Closure which is called as MARKER in above config (A function which returns Promise of FieldConfig)
  • API Source - Currently Not Developed (Open For Contribution)
Example of Closure Implementation
1
buildStateListClosure(config: FieldConfig<any>, initial = false): FieldConfigOptionsBuilder<Location> {
2
return (formControl: FormControl, _: FormControl, notifyLoading, notifyLoaded) => {
3
return defer(async () => {
4
const req: LocationSearchCriteria = {
5
from: CachedItemRequestSourceFrom.SERVER,
6
filters: {
7
type: LocationType.TYPE_STATE
8
}
9
};
10
notifyLoading();
11
return this.fetchUserLocation(req)
12
.then((stateLocationList: Location[]) => {
13
notifyLoaded();
14
const list = stateLocationList.map((s) => ({ label: s.name, value: s }));
15
if (config.default && initial) {
16
const option = list.find((o) => o.value.id === config.default.id || o.label === config.default.name);
17
formControl.patchValue(option ? option.value : null, { emitModelToViewChange: false });
18
formControl.markAsPristine();
19
config.default['code'] = option ? option.value['code'] : config.default['code'];
20
}
21
initial = false;
22
return list;
23
})
24
.catch((e) => {
25
notifyLoaded();
26
this.commonUtilService.showToast('NO_DATA_FOUND');
27
console.error(e);
28
return [];
29
});
30
});
31
};
32
}
Copied!
The Logic Inside can be customised to own needs of project.
Function Signature should be as follows:
1
functionName(config: FieldConfig<any>, initial = false): FieldConfigOptionsBuilder<T>
Copied!