@softheon/forms v2.0.2

Softheon Forms

Softheon Forms provides Angular developers pre defined form components so developers can quickly create forms in their web applications.

Quick Links

• Getting Started
• Components
  • Address
  • Alert
  • Amount
  • Checkbox Validator
  • Currency
  • Date Picker
  • Email
  • Name
  • Phone Number
  • Relationship
  • Social Security Number
  • State
  • Status Frame
  • Yes/No Question
• Directives
  • Letters Only
  • Number of Digits
  • Number of Digits Range
  • Numbers Only
  • Provide Parent Form
• NPM Repository

Getting Started

Step 1: Install Softheon Forms

Install the package.

npm install --save @softheon/forms@latest

Include a link to Softheon Workshop

<link rel="stylesheet" ref="https://softheonworkshop.azureedge.net/alpha-9-5/workshop.min.css">

Step 2: Install the component modules

Import the NgModule for each component you want to use:

import { SofNameModule, SofAddressModule } from '@softheon/forms';
@NgModule({
    ...
    imports: [SofNameModule, SofAddressModule]
    ...
})
export class MyAppModule { }

Alternatively, you can create a separate NgModule that imports all of the Angular Material components that you will use in your application. Then you can include this module wherever you'd like to use the components.

import { SofNameModule, SofAddressModule } from '@softheon/forms';
@NgModule({
    ...
    imports: [SofNameModule, SofAddressModule],
    exports: [SofNameModule, SofAddressModule]
    ...
})
export class MyCustomSoftheonFormsModule { }

Components

Address Component

<softheon-form-address> is a component used to wrap several Softheon inputs together which allows a user to enter their address.

API reference for Softheon Address Component

import { SofAddressModule } from '@softheon/forms';

Properties

Additional Classes

Address

API reference for Address

import { Address } from '@softheon/forms';

Properties

Alert Component

<softheon-form-alert> is a component used for displaying an alert message to the user

API reference for Softheon Form Alert Component

import { SofAlertModule } from '@softheon/forms';

Properties

Amount Component

Coming Soon

Checkbox Validator Component

Coming Soon

Currency Component

<softheon-form-currency> is a component used for gathering currency amount.

API reference for Softheon Currency Component

import { SofCurrencyModule } from '@softheon/forms';

Properties

Date Picker Component

<softheon-form-date-picker> is a component used for creating an input that allows a user to select a date using a calendar.

API reference for Softheon Form Date Picker Component

import { SofDatePickerModule } from '@softheon/forms';

Properties

Email Component

Coming Soon

Name Component

<softheon-form-name> is a component used to wrap several Softheon inputs together which allows a user to enter their full name.

API reference for Softheon Form Name Component

import { SofNameModule } from '@softheon/forms';

Properties

Additional Classes

Name

Properties

Suffix

Enumeration of suffixes:

export enum Suffix {
    Jr = "Jr.",
    Sr = "Sr.",
    Ii = "II",
    Iii = "III",
    Iv = "IV"
  }

Phone Number Component

<softheon-form-phone-number> is a component used to collect a user's phone number with options to include phone type, calling code and extension code as well.

API reference for Softheon Phone Number Component

import { SofPhoneNumberModule } from '@softheon/forms';

Properties

Additional Classes

Phone Number

This is the model for the phone number input. It includes the phone type, calling code, phone number and extension code.

Properties

Methods

|

Phone Type

Enumeration of phone types:

export enum PhoneType {
    HOME = 'HOME',
    WORK = 'WORK',
    MOBILE = 'MOBILE'
  }

Properties

Relationship Component

<softheon-form-relationship> is a component used to collect a user's relationship to the applicant.

API reference for Relationship Component

import { SofRelationshipModule } from '@softheon/forms';

Properties

Additional Classes

Relationship Enumeration

This is the enumeration of all possible relationship options. Note you can define and pass your relationship options via the relationshipOptions property defined above.

export enum Relationship {
    SPOUSE = 'Spouse',
    PARENT = 'Parent',
    SON_DAUGHTER = 'Son or Daughter',
    STEPSON_STEPDAUGHTER = 'Stepchild',
    GRANDCHILD = 'Grandchild',
    SIBLING = 'Sibling',
    DOMESTIC_PARTNER = 'Domestic Partner',
    CHILD_OF_DOMESTIC_PARTNER = 'Child of Domestic Partner',
    UNRELATED = 'Unrelated',
    OTHER_RELATIVE = 'Other Relative',
    STEP_PARENT = 'Step Parent',
    AUNT_UNCLE = 'Aunt or Uncle',
    NEPHEW_NIECE = 'Nephew or Niece',
    GRANDPARENT = 'Grandparent',
    FIRST_COUSIN = 'First Cousin',
    PARENTS_DOMESTIC_PARTNER = 'Parent\'s Domestic Partner',
    OTHER = 'Other',
    BROTHER_IN_LAW_SISTER_IN_LAW = 'Sibling in law',
    DAUGHTER_IN_LAW_SON_IN_LAW = 'Son or Daughter in law',
    MOTHER_IN_LAW_FATHER_IN_LAW = 'Parent in law',
    SPONSORED_DEPENDENT = 'Sponsored Dependent',
    DEPENDENT_OF_A_MINOR_DEPENDENT = 'Dependent of Minor Dependent',
    SELF = 'Self',
  
    //legal specific
    FOSTER_CHILD = 'Foster Child',
    COURT_APPOINTED_GUARDIAN = 'Court Appointed Guardian',
    ADOPTED_CHILD = 'Adopted Child',
    FORMER_SPOUSE = 'Former Spouse',
    FOSTER_PARENT = 'formerParent',
    GUARDIAN = 'Guardian',
    ANNUITANT = 'Annuitant',
    TRUSTEE = 'Trustee',
    WARD = 'Ward',
  
    //Tax Specific
    TAX_FILER = 'Tax Filer',
    TAX_DEPENDENT = 'Tax Dependent',
    COLLATERAL_DEPENDENT = 'Collateral Dependent',
  
    // Other
    NONE = 'None of these'
  }

Family Relationships

Array of all family relationships.

/** Enumeration for family relationships */
export const FamilyRelationships: Relationship[] = [
  Relationship.SPOUSE,
  Relationship.PARENT,
  Relationship.SON_DAUGHTER,
  Relationship.STEPSON_STEPDAUGHTER,
  Relationship.GRANDCHILD,
  Relationship.SIBLING,
  Relationship.DOMESTIC_PARTNER,
  Relationship.CHILD_OF_DOMESTIC_PARTNER,
  Relationship.UNRELATED,
  Relationship.OTHER_RELATIVE,
  Relationship.STEP_PARENT,
  Relationship.AUNT_UNCLE,
  Relationship.NEPHEW_NIECE,
  Relationship.GRANDPARENT,
  Relationship.FIRST_COUSIN,
  Relationship.PARENTS_DOMESTIC_PARTNER,
  Relationship.OTHER,
  Relationship.BROTHER_IN_LAW_SISTER_IN_LAW,
  Relationship.DAUGHTER_IN_LAW_SON_IN_LAW,
  Relationship.MOTHER_IN_LAW_FATHER_IN_LAW,
  Relationship.SPONSORED_DEPENDENT,
  Relationship.DEPENDENT_OF_A_MINOR_DEPENDENT,
  Relationship.SELF,
];

Legal Relationships

Array of all legal relationships.

export const LegalRelationships: Relationship[] = [
  Relationship.ADOPTED_CHILD,
  Relationship.COURT_APPOINTED_GUARDIAN,
  Relationship.FORMER_SPOUSE,
  Relationship.FOSTER_CHILD,
  Relationship.FOSTER_PARENT,
  Relationship.GUARDIAN,
  Relationship.ANNUITANT,
  Relationship.TRUSTEE,
  Relationship.WARD,
  Relationship.OTHER,
];

Tax Relationships

Array of all tax relationships.

export const TaxRelationships: Relationship[] = [
  Relationship.TAX_FILER,
  Relationship.TAX_DEPENDENT,
  Relationship.COLLATERAL_DEPENDENT
];

Relationship Helper

Helper class providing methods for relationship component.

Properties

Social Security Number Component

<softheon-form-ssn> is a component used to collect a user's social security number. It automatically supports masking the user's social security number as well.

API reference for Social Security Number Component

import { SofSocialSecurityNumberModule } from '@softheon/forms';

Properties

State Component

Coming Soon

Status Frame Component

<softheon-form-ssn> is a component used to display a frame around the given HTML content. It displays a green bar in the frame once the content inside the frame is valid.

API reference for Status Frame Component

import { SofStatusFrameModule } from '@softheon/forms';

Properties

Yes/No Question Component

<softheon-form-yes-no-question> is a component used to ask a general yes or no question.

API reference for Yes/No Question Component

import { SofYesNoQuestionModule } from '@softheon/forms';

Properties

Directives

You can import all of the directives listed below by importing the SofDirecteModule module or you can import the individual directives that you need.

import { SofDirectiveModule } from '@softheon/forms';

Letters Only Directive

[lettersOnly] is a directive for restricting the input to be letters only.

API reference for Number of Digits Directive

import { LettersOnlyDirective } from '@softheon/forms';

Example

<input id="name" placeholder="Forst Name" [lettersOnly]="true"/>

Number of Digits Directive

[numberOfDigits] is a directive for validating the input has the required number of digits.

API reference for Number of Digits Directive

import { NumberOfDigitsDirective } from '@softheon/forms';

Example

<input id="ssn" placeholder="Social Security Number" [numberOfDigits]="9"/>

Number of Digits Range Directive

[numberOfDigitsRange] is a directive for validating the input has the required number of digits.

API reference for Number of Digits Directive

import { NumberOfDigitsRangeDirective } from '@softheon/forms';

Example

  /** The possible zip code length values */
  public readonly zipCodeLengthRange: number[] = [5, 9];

<input id="zipCode" placeholder="Zip Code" [numberOfDigitsRange]="zipCodeLengthRange"/>

Numbers Only Directive

[numbersOnly] is a directive for allowing only numbers to be entered into an input.

API reference for Numbers Only Directive

import { NumbersOnlyDirective } from '@softheon/forms';

Example

<input id="zipCode" placeholder="Zip Code" [numbersOnly]="true"/>

Provide Parent Form Directive

[provide-parent-form] is a directive that allows the parent form to be passed to the child.

API reference for Provide Parent Form Directive

import { ProvideParentFormDirective } from '@softheon/forms';

Example

<form #theForm="ngForm">
    <div provide-parent-form>        
    </div>
</form>