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

Name	Description	Required	Default
address: Address	The address model.	Yes	Null
required: boolean	Whether the address is required.	No	True
streetRequired: boolean	Whether the street address is required. Overrides required property.	No	Null
zipRequired: boolean	Whether the zip code is required. Overrides the required property.	No	Null
id: string	ID used to differentiate a component when multiple instances appear on the same page.	No	''
readonly: boolean	Whether the component should be readonly.	No	False
showStreetName2: boolean	Whether to show Apt./Ste. input.	No	False
disableState: boolean	Whether to disable the state.	No	False
defaultState: string	The default state.	No	Null
showZipCodeExt: boolean	Whether to allow zip code to be greater than 5 digits.	No	True
justZip: boolean	Whether only the zip code field should be shown.	No	False
street1Placeholder: string	Placeholder text for street 1	No	Street
street2Placeholder: string	Placeholder text for street 2	No	Apt./Ste. #
cityPlaceholder: string	Placeholder text for city	No	City
zipCodePlaceholder: string	Placeholder text for city	No	Zip Code

Additional Classes

Address

API reference for Address

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

Properties

Name	Description
streeName1: string	The first line of the street address.
streetName2: string	The second line of the street address.
cityName: string	The name of the city where the address is located.
stateCode: string	The two letter USPS State Code.
zipCode: string	The full five or nine digit zip code

---

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

Name	Description	Required	Default
text: string	The alert message to display.	Yes	Null
show: boolean	Whether the alert message should be shown.	No	True
align: string	The HTML alignment of the component. Can be left, center, or right.	No	center

---

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

Name	Description	Required	Default
id: string	ID used to differentiate a component when multiple instances appear on the same page.	No	''
value: string	The currency model	Yes	Null
valueChange: EventEmitter<string>	The currency amount output event emitter	No	EventEmitter<string>
required: boolean	Whether the currency component is required.	No	True
prefix: string	What to display before the amount.	No	'$'
suffix: string	What to display after the amount.	No	''
includeThousandsSeparator: boolean	Whether or not to separate thousands.	No	True
thousandsSeparatorSymbol: string	Character with which to separate thousands.	No	','
allowDecimal: boolean	Whether to allow the user to enter a fraction with the amount.	No	True
decimalSymbol: string	Character that will act as a decimal point.	No	.
decimalLimit: number	How many digits to allow after the decimal.	No	2
integerLimit: number	Limit the maximum currency amount. Set to null for no limit.	No	Null
requireDecimal: boolean	Whether to always include a decimal point and placeholder for decimal digits after the integer.	No	False
allowNegative: boolean	Whether to allow negative numbers.	No	False
allowLeadingZeroes: boolean	Whether to allow leading zeroes.	No	False
placeHolder: string	The placeholder text for the input.	No	Amount

---

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

Name	Description	Required	Default
date: Date	The Date model.	Yes	Null
required: boolean	Whether the date is required.	No	True
id: string	ID used to differentiate a component when multiple instances appear on the same page.	No	''
placeholder: string	Placeholder text for the date picker input.	Yes	Null
maxDate: Date	The maximum date the date picker should allow.	No	Null
minDate: Date	The minimum date the date picker should allow.	No	Null
startAt: Date	The date the date picker should start with.	No	Null

---

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

Name	Description	Required	Default
name: Name	The Name model.	Yes	Null
required: boolean	Whether first and last name should be required.	No	True
id: string	ID used to differentiate a component when multiple instances appear on the same page.	No	''
showMiddle: boolean	Whether middle name should be shown.	No	True
showSuffix: boolean	Whether suffix should be shown.	No	True
suffixOptions: Suffix[]	Array of suffixes to choose from.	No	Suffix

Additional Classes

Name

---

Properties

Name	Description
firstName: string	The first name.
middleName?: string	The middle name.
lastName: string	The last name.
suffix?: Suffix	The suffix.

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

Name	Description	Required	Default
phoneNumber: PhoneNumber	The phone number model.	Yes	Null
required: boolean	Whether the phone number is required.	No	True
id: string	ID used to differentiate a component when multiple instances appear on the same page.	No	''
showPhoneType: boolean	Whether to ask for the phone type.	No	True
showCallingCode: boolean	Whether to ask for the calling code.	No	False
showExtensionCode: boolean	Whether to show the extension code.	No	True
placeholder: string	The placeholder text for the input.	No	'Phone Number'
placeholderExt: string	The placeholder text for the extension code.	No	'Extension Code'
placeholderType: string	The place older text for the phone type.	No	'Phone Type'

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

Name	Description
type: PhoneType	The type of phone number. Usually can be work, mobile or home.
callingCode: string	The calling code for the phone number. I.e. U.S.A is 1.
callingCodeName: string	The country name for the calling code.
number: string	The phone number.
extensionCode: string	The extension code.

Methods

Name	Description
getCleanPhoneNumber(): string	Removes any paranthesis, hyphens, or spaces from the phone number. I.e. (012) 345-6789 => 0123456789

|

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

Name	Description	Required	Default
id: string	ID used to differentiate a component when multiple instances appear on the same page.	No	''
relationshipConst: string	Relationship category to use. Can be either family, legal or tax.	No	family
required: boolean	Whether relationship input is required.	No	False
relationshipOptions: Relationship[]	Array of available relationship options.	No	[]
isSpouse: boolean	Whether the applicant is a spouse.	No	False
relationship: Relationship	The relationship model.	Yes	Null
relationshipChange: EventEmitter<Relationship>	Event emitter for relationship change event.	No	EventEmitter<Relationship>

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

Name	Description
getCounterRelationship(relationship: Relationship)	Gets the counter relationship for the given relationship. For example param = parent, return = child.

---

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

Name	Description	Required	Default
ssn: string	The social security number model	Yes	Null
required: boolean	Whether the social security number should be required.	No	True
id: string	ID used to differentiate a component when multiple instances appear on the same page.	No	''
ssnChange: EventEmitter<string>	Social security number change event emitter.	No	EventEmitter<string>

---

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

Name	Description	Required	Default
name: string	The name to be displayed in the status frame title	No	Empty String
status: string	Status of the frame	No	complete, progress or edit
valid: boolean	Whether the content in the frame is valid	No	False
showHeader: boolean	Whether to show the header	No	True
showStatus: boolean	Whether to show the status based on form validity	No	True
minimizable: boolean	Whether the status frame component can be minimized/collapsed	No	False
isMinimized: EventEmitter<boolean>	Emits whether the status frame is minimized/collapsed	No	EventEmitter<boolean>

---

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

Name	Description	Required	Default
required: boolean	Whether the question requires an answer.	No	True
id: string	ID used to differentiate a component when multiple instances appear on the same page.	No	''
label: string	The question to ask.	Yes	Null
tooltip: string	The text to be displayed in the tool-tip.	No	Null
yesText: string	The text to display for the true option.	No	Yes
noText: string	The text to display for the false option.	No	No
switchOrder: boolean	If true, the false option will be shown first.	No	False
hasUnknown: boolean	Whether there should be an unkonwn option.	No	False
booleanChange: EventEmitter<boolean>	The boolean output event.	No	EventEmitter<boolean>
unknownChange: EventEmitter<boolean>	The unkonwn boolean output event.	No	EventEmitter<boolean>
onChange: EventEmitter<boolean>	Event to hook into on change events.	No	EventEmitter<boolean>

---

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>