Angular Directives for Formatting Input

Begin by importing the JhaResponsiveCoreModule into your application.

// import into app.module
import { JhaResponsiveCoreModule } from '@jha/jharesponsive/jha-responsive-core';

@NgModule({
    imports: [
        ...
        JhaResponsiveCoreModule.forRoot(),
        ...
    ]
})

export class AppModule(){}

jhaCurrencyInput

Add the jhaCurrencyInput directive to inputs that prompt for currency. This directive formats the input’s value as currency after the user exits the field. Non-currency characters are removed from the value and the decimal portion is padded to 2 places.

<input id="GrossIncome" name="GrossIncome" type="number" step="0.01" jhaCurrencyInput
    class="form-control" [(ngModel)]="customerInfo.grossIncome" autocomplete="off"
    autocorrect="off" autocapitalize="off" spellcheck="false" />

jhaDecimalInput

Add the jhaDecimalInput attribute directive to inputs that prompt for numeric values, where you need a specific number of decimal places shown after the decimal point; use the jhaDecimalPlaces attribute to specify the number of decimal places. The value is formatted after the user exits the field.

<input id="InterestRate" name="InterestRate" type="number"
    jhaDecimalInput jhaDecimalPlaces="3" class="form-control"
    [(ngModel)]="customerInfo.interestRate" autocomplete="off"
    autocorrect="off" autocapitalize="off" spellcheck="false" />

jhaZeroPaddedNumber

Add the jhaZeroPaddedNumber attribute directive to inputs that prompt for numeric values, where the value must be padded with zeros to a specified length; use the jhaLength attribute to specify the total number of digits that must be present. The value is formatted after the user exits the field.

<input id="SSN" name="SSN" type="number" jhaZeroPaddedNumber jhaLength="9" class="form-control"
    [(ngModel)]="customerInfo.ssn" required autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" />