Skip to main content
The Input class creates a basic text input field for capturing single-line text from users. It extends InputBaseNode and provides character count validation and read-only mode support.

​
Inheritance

ObjectBase → NodeBase → InputBaseNode → Input

​
Constructor

new Input(
  id: string,
  placeholder?: string,
  value?: any,
  maxCharCount?: number,
  singleLine?: boolean,
  icon?: string,
  errorMessage?: string,
  disabled?: boolean,
  readOnly?: boolean,
  validator?: Validator,
  asyncValidator?: AsyncValidator,
  action?: Action | Action[]
)

​
Parameters

​
id
string
required
The unique identifier for the input field in the DOM.
​
placeholder
string
The placeholder text displayed when the input is empty.
​
value
any
The initial value of the input field.
​
maxCharCount
number
Maximum number of characters allowed in the input.
​
singleLine
boolean
default:"false"
Whether the input should be displayed in a single line layout.
​
icon
string
Material icon name to display alongside the input.
​
errorMessage
string
Custom error message to display when validation fails.
​
disabled
boolean
Whether the input is disabled.
​
readOnly
boolean
default:"false"
Whether the input is read-only.
​
validator
Validator
Synchronous validator(s) to apply to the input. Can be a single ValidatorFn, an array of ValidatorFn, or null.
​
asyncValidator
AsyncValidator
Asynchronous validator(s) to apply to the input. Can be a single AsyncValidatorFn, an array of AsyncValidatorFn, or null.
​
action
Action | Action[]
Action(s) to execute when specific events occur on the input.

​
Properties

PropertyTypeDescription
idstringThe unique identifier for the input field
placeholderstringThe placeholder text
typeNodeTypeThe type of node (set to 'input')
valueanyThe current value of the input
maxCharCountnumberMaximum character count
minCharCountnumberMinimum character count
readOnlybooleanWhether the input is read-only
singleLinebooleanSingle line layout flag
iconstringMaterial icon name
errorMessagestringCustom error message
disabledbooleanDisabled state
validatorValidator | AbstractControlOptionsSynchronous validators
asyncValidatorAsyncValidatorFnAsynchronous validator
actionAction | Action[]Associated actions
hintstringHint text displayed below the input
autoFocusbooleanWhether to auto-focus the input

​
Methods

​
editable()

Makes the input field editable by setting readOnly to false. 
input.editable();

​
readonly()

Makes the input field read-only by setting readOnly to true. 
input.readonly();

​
apply()

Inherited from ObjectBase. Applies additional properties to the node instance. 
apply(options: Partial<Input>): this

​
getNativeElement()

Returns the native DOM element for this input. 
getNativeElement(): HTMLElement | null

​
Usage Examples

​
Basic Input

import { Input } from 'mat-dynamic-form';

const nameInput = new Input('name', 'Full Name');

​
Input with Validation

import { Input } from 'mat-dynamic-form';
import { Validators } from '@angular/forms';

const emailInput = new Input('email', 'Email Address').apply({
  icon: 'email',
  validator: [Validators.required, Validators.email],
  errorMessage: 'Please enter a valid email address'
});

​
Input with Character Limit

const bioInput = new Input('bio', 'Bio', undefined, 500).apply({
  hint: 'Tell us about yourself (max 500 characters)',
  icon: 'description'
});

​
Read-Only Input

const usernameInput = new Input('username', 'Username', 'john_doe').apply({
  readOnly: true,
  icon: 'account_circle',
  hint: 'Username cannot be changed'
});

​
Input with Actions

const searchInput = new Input('search', 'Search').apply({
  icon: 'search',
  action: {
    type: 'valueChange',
    onEvent: (param) => {
      console.log('Search query:', param.event);
      // Perform search operation
    }
  }
});

​
Dynamic Read-Only Toggle

const addressInput = new Input('address', 'Address', '123 Main St');

// Make read-only
addressInput.readonly();

// Make editable
addressInput.editable();

Build docs developers (and LLMs) love

Get started for freeTalk to us