SunbirdEd Forms

Contains Form component powered by angular. This component expects a configuration and renders form according to the view.

Video on Extensibility Framework


Current Release Branch


NPM Published version (Latest)


NPM Package Name


NPM Link


In Angular Projects Only

Getting Started

Step 1: Install the package

npm install common-form-elements --save

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

<sb-form (valueChanges)="function($event)" (statusChanges)="function($event)" >

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

buildStateListClosure(config: FieldConfig<any>, initial = false): FieldConfigOptionsBuilder<Location> {
    return (formControl: FormControl, _: FormControl, notifyLoading, notifyLoaded) => {
      return defer(async () => {
        const req: LocationSearchCriteria = {
          from: CachedItemRequestSourceFrom.SERVER,
          filters: {
            type: LocationType.TYPE_STATE
        return this.fetchUserLocation(req)
          .then((stateLocationList: Location[]) => {
            const list = => ({ label:, value: s }));
            if (config.default && initial) {
              const option = list.find((o) => === || o.label ===;
              formControl.patchValue(option ? option.value : null, { emitModelToViewChange: false });
              config.default['code'] = option ? option.value['code'] : config.default['code'];
            initial = false;
            return list;
          .catch((e) => {
            return [];

The Logic Inside can be customised to own needs of project.

Function Signature should be as follows:

functionName(config: FieldConfig<any>, initial = false): FieldConfigOptionsBuilder<T>

Last updated