Skip to content

Under The Hood

Introduction

  • Reactive forms provide a model-driven approach to handling form inputs whose values change over time using concepts such as FormControl.
  • Sisitech MyForms can be looked at as extension of Angular's Reactive Forms component coupled with several Angular Ng Directives to achieve the dynamic module we know and use today.
  • The easiest way to understand the inner workings of MyForms is to look at the html component of two key folders within the module i.e myform.component.html and multistep-form.component.html.
  • But first, let's dive into the folder structure of the MyForms module to know where different folders and files are located and also to understand the importance of some of them.

Folder Structure

  • The image below shows the folder structure of the MyForms library and a brief explanation of what each folder/file is about:

  • The table below gives a more detailed breakdown of the key files in the structure above:

Folder/File Description
🗒️ Myforms.component.html The main myforms component files. The .html file contains the HTML code that renders the form on the frontend.
🗒️ Myforms.component.ts The .ts file contains the key functions and inputs that handle the data being passed through Myforms.
🗒️ Myforms.component.scss Handles myforms styling
🗒️ Myforms.interface.ts The interface.ts file contains the key classes representing data objects used in Myforms.
🗒️ Myforms.module.ts The module.ts file contains the modules Myforms is dependent on.
📁 multistep-form The folder that houses the multistep form component of the MyForms library.
📁 myinput The component is used to render different kinds of form fields on Myforms.
📁 ng-multi-select This is used as a sub-component of the myinput component used to render a specific type of form field that has multiple options to select from. Think of it as a drop-down component.
📁 toast A supporting component that renders a toast message at the top or bottom of a form. It’s used to provide feedback when different form actions are triggered. The storage service.ts files support this component.
🗒️ public.api.ts The file that exposes the different components within the MyForms library. Only the files listed here can be referenced by consumers of the library.
🗒️ ng.package.json The files that control the naming and versioning details of the MyForms library.


Key Files & Components

  • Now that we know the different files that make up the MyForms Library, it's time to delve into the core components of this library.
  • As mentioned earlier, the best place to start is the two html files for myforms and the multistep-form.

myform.component.html

  • The MyForms html file shows the different key components and inputs that make up the myforms module.
  • The code below shows the basic
    html element that is enriched with multiple components and rendered differently using boolean values we pass to the *ngIf directives controlling differnet parts of the form.
  • Follow this link to have an indepth look of the file: myform.component.html.

Key Inputs & Outputs

  • The inputs passed to app-myform are described in some detail in the table we discussed earlier in the Inputs & Outputs section of the Usage file.
  • The table below shows another summary of the inputs and outputs the component.ts file features:

Inputs


Input Description
formGroup The Angular FormGroup for the form.
submitButtonText The text displayed on the submit button. Default is "Post."
submitButtonPreText Text to display before the submit button text.
formItems Input data for the form.
name Name of the form.
instanceName Name of the instance.
formActionName Name of the form action.
enableAddAnother Indicates whether to enable adding another form. Default is false.
enableAlertNotifications Indicates whether to enable alert notifications. Default is true.
doUpdate Indicates whether to perform an update. Default is false.
extraFields Extra fields for the form.
httpMethod HTTP method for form data submission.
componentType Type of component ("form" or "filter"). Default is "form."
alerts Array of alert objects.
collapseFilters Set to true to collapse filters.
instance Input instance data.
url URL for data submission.
readOnly Indicates if the form is read-only.
hideButtons Indicates whether to hide buttons. Default is false.
formGroupOrder Order of form group elements.


Outputs

Output Description
onValidatedData Emits validated form data.
onPostedData Emits data when it's posted.
isLoading$ Emits loading status.
onFormChanges Emits form changes.
instance Output instance data.


Note

Please note that not all Inputs and Outputs have been documented, but this table covers the most important ones.

Key Functions

  • The table below, provides a breakdown of the key functions within the myforms component that handle the rendering of the form as well as well as data handling of the form.
  • It shows the functions in the component, arguments they accept, their purpose and their return values if any.


Function Arguments Description Output
ngAfterViewInit None Lifecycle hook called after the view is initialized. Checks the collapse status of the filter div. None
getPossibleControls None Retrieves possible form controls and sections from formGroupOrder. Returns an object with possible fields and sections.
createControls None Creates form controls based on formGroupOrder and formItems. None
ngOnInit None Lifecycle hook called when the component is initialized. Subscribes to form value changes. None
ngOnDestroy None Lifecycle hook called when the component is destroyed. Unsubscribes from form value changes. None
filterCollapsableDivElement None Retrieves the filter collapsable element. Returns a filter collapsable element or undefined.
setCollapseFilterStatus status: boolean Sets the collapse status of the filter div. None
toggleFilterDivCollapse None Toggles the collapse status of the filter div. None
collpse None Toggles the collapse status of the filter div. None
updateFormStuff val: any Updates form data. None
ngOnChanges None Lifecycle hook called when input properties change. Checks instance changes. None
checkInstanceChangesUpdateForm None Checks if the instance has changed and updates the form accordingly. None
getDescriptionObject formControlName: string Retrieves the description object for a form control. Returns a description object.
getFieldNameErros formControlName: string Retrieves form errors for a specific field. Returns form errors.
onKeydown event: any Handles keydown events. None
resetForm None Resets the form to its initial state. None
showLoader status: boolean Displays or hides a loading spinner. None
dataReceived None Handles form data when it's received. None
filtersExpanded event: any Expands the filters. None
myFormValid None Checks if the form is valid. Returns true or false.
formAction None Determines the form action name based on input properties. Returns the form action name.
onDone event: any Emits posted data. None
removeNullFields data: any Removes null fields from data. Returns data with null fields removed.
sendDataHttp data: any Sends form data via HTTP requests. None
showSnackBar message: string Displays a snackbar message. None
getControl name: string Retrieves a form control by name. Returns a form control or a new FormControl.


MyInput Component

  • The provided component is designed to render various types of form fields based on the specified formControlType.
  • It can be used in both form-only and filter-only contexts, allowing for the creation of user interfaces for data entry and filtering in Angular applications.
  • This versatile component can handle a wide range of form field types, including dropdown selects, multiple selects, checkboxes, image displays, text areas, custom multi-select fields, file inputs, and text inputs. Each form field type is customized to display and interact with the user's data in a specific way.
  • This component serves as a flexible building block for creating forms and filters in Angular applications, enhancing user interactions and data management.
  • The table below shows the different form field types that can be rendered based on the formControlType passed. The descriptions provide an overview of their functionality, and any special notes indicate specific behavior or characteristics to be aware of.


Form Field Type Description Special Notes
choice Dropdown select field. Options are fetched from choices.
multiplechoice Multiple select field. Options are fetched from choices.
boolean Checkbox field. Can have a label with optional text.
image_display Display an image. Includes a link to view/download the image.
textArea Multiline text input. May include a placeholder text.
multifield Multi-select field (custom component). Behavior determined by the app-multi-select component.
file File input field. Can replace or display existing file.
Default Text input field. May include a placeholder text.


  • The images below show the differnet kind of fields that can be rendered by the MyInput component:

Basic Form Field

Text Area Field

Date Field

Multi-Select Field

multistep-form.component.html

  • From the code below it is clear that the multistep form is a simple extension of the myforms component that has an iterative aspect to it introduced by the *ngFor directive used to loop through the multiple formGroups we pass to this component.
<h3 class="card-title">{{options.title}}</h3>

<div class="row justify-content-md-center upe-mutistep-form">
    <div class="step-header d-flex mb-2">
        <span [ngStyle]="stepStyle(ind)" (click)="currentStep<ind?doNothing(): updateNextStep(ind-1)"
            *ngFor="let form of options.forms;let ind=index;"
            class="steplevel {{ind<currentStep+1?'active':''}} text-center">
            {{form.stepTitle||'Step '+(ind+1)}}</span>
    </div>
</div>

<div *ngFor="let form of options.forms;let ind=index;">
    <app-myform *ngIf="options.activeForm==ind" [formGroupOrder]="form.sections"
        [formItems]="form.options||options.options" [url]="options.url"
        submitButtonPreText="{{ind!=options.forms.length-1?' ':options.submitButtonPreText}}"
        submitButtonText="{{ind!=options.forms.length-1?(instance !=null?'Update':'Next'):options.submitButtonText}}"
        [isValidationOnly]="ind!=options.forms.length-1?true:options.isValidationOnly||false"
        [extraFields]="ind!=options.forms.length-1?{}:getExtraFields()"
        [instance]="instance?instance:this.formCache[ind] || {}"
        (onValidatedData)="ind!=options.forms.length-1?onNextForm(ind,$event):onFinalValidatedData($event)"
        (onPostedData)="ind==options.forms.length-1?onFinalPostedData($event):null">
    </app-myform>
</div>
  • An additional feature is the header section that is used to show which form we're currently viewing or editing.

Supporting Components

  • MyForms works in liason with several other Sisitech libraries. The following list provides the list of these libraries and the links to their documentation:

  • Toast

  • MyTables
  • NgxAuth

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.
  • Examples: See real-world examples of Sisitech Forms in ac

Comments