This project was generated using Angular CLI version 19.2.0.

To use this library in another Angular project, simply run:

npm install field-code

🔢 Configuration Options

The field-code component allows customization of the number of input fields and the number of characters per field.

Inputs:

• numberOfFields = 4 – Number of input fields to display (e.g. 4 for a 4-digit PIN).
• digitsPerField = 2 – Number of characters allowed per field (e.g. 1 for OTP, 2+ for grouped input).

Importing the Component Since the field-code component is standalone, you can directly import it into any standalone component or Angular module.

➕ Usage with Reactive Forms

In your component:

import { FormGroup, FormControl } from '@angular/forms';

form = new FormGroup({
  FieldCode: new FormControl('') // can be a string or array depending on outputFormat
});

In your HTML template:

<form [formGroup]="form">
  <field-code
    formControlName="FieldCode"
    [numberOfFields]="6"
    [digitsPerField]="1"
    [outputFormat]="'string'"
  ></field-code>
</form>

Configuration Options

The field-code component allows customization through several @Input() properties:

Input Type Default Description numberOfFields number 4 Number of inputfields digitsPerField number 2 Number of digits per field outputFormat 'array' | 'string' 'array' Output format: array of strings or concatenated string disabled boolean (optional) false Disables all input fields when true

Output Value The component implements ControlValueAccessor to integrate seamlessly with Angular forms.

If outputFormat = 'array' → returns a string[], e.g., ['12', '34']

If outputFormat = 'string' → returns a single string, e.g., '1234'

You can listen to value changes like this:

this.form.get('FieldCode')?.valueChanges.subscribe(value => {
  console.log('Entered code:', value);
});

Additional Resources

For more information on using the Angular CLI, including detailed command references, visit the Angular CLI Overview and Command Reference page.