Skip to main content

​
Overview

The Input component creates a standard text input field for single-line text entry. It includes support for character count limits, read-only mode, validation, and Material Design icons.

​
When to Use

Use the Input component when you need to:
  • Capture short text like names, email addresses, or usernames
  • Enforce character limits on text entry
  • Display read-only text that users can copy
  • Implement real-time validation on text input
For multi-line text entry, use Textarea instead.

​
Basic Usage

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

const nameInput = new Input('fullName', 'Full Name');
This creates a basic text input with the id fullName and the placeholder text “Full Name”.

​
Common Patterns

​
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',
  hint: 'We will never share your email'
});

​
Input with Character Limit

const usernameInput = new Input('username', 'Username', '', 20).apply({
  icon: 'person',
  validator: [Validators.required, Validators.minLength(3)],
  hint: 'Choose a unique username (3-20 characters)'
});
The character counter will automatically appear when maxCharCount is set.

​
Read-Only Input

const referenceInput = new Input('refNumber', 'Reference Number', 'REF-12345').apply({
  readOnly: true,
  icon: 'tag',
  hint: 'This reference number is generated automatically'
});

​
Input with Value Change Handler

const searchInput = new Input('search', 'Search').apply({
  icon: 'search',
  action: {
    type: 'valueChange',
    onEvent: (param) => {
      const query = param.event;
      console.log('Searching for:', query);
      // Trigger search logic
      this.performSearch(query);
    }
  }
});

​
Properties

​
id
string
required
Unique identifier for the input field. Used to retrieve the value from the form.
​
placeholder
string
Placeholder text shown when the input is empty.
​
value
any
Initial value of the input field.
​
maxCharCount
number
Maximum number of characters allowed. Shows a character counter.
​
minCharCount
number
Minimum number of characters required.
​
readOnly
boolean
default:"false"
Whether the input is read-only. Users can select and copy but not edit.
​
icon
string
Material icon name to display (e.g., 'person', 'email', 'phone').
​
validator
ValidatorFn | ValidatorFn[]
Angular validators to apply. Common: Validators.required, Validators.email, Validators.pattern().
​
errorMessage
string
Custom error message shown when validation fails.
​
hint
string
Helper text displayed below the input field.
​
disabled
boolean
default:"false"
Whether the input is disabled and non-interactive.
​
singleLine
boolean
default:"false"
Whether the input takes up a full row in the form grid.
​
autoFocus
boolean
default:"false"
Whether the input receives focus when the form loads.

​
Methods

​
editable()

Makes the input editable by setting readOnly to false. 
const input = new Input('field', 'Field').apply({ readOnly: true });

// Later, make it editable
input.editable();

​
readonly()

Makes the input read-only by setting readOnly to true. 
const input = new Input('field', 'Field');

// Make it read-only
input.readonly();

​
apply()

Applies multiple properties at once using a fluent interface. 
input.apply({
  icon: 'email',
  validator: Validators.required,
  hint: 'Enter your email'
});

​
getNativeElement()

Returns the native DOM element for direct manipulation. 
const element = input.getNativeElement();
if (element) {
  element.focus();
  element.scrollIntoView();
}

​
Validation Examples

​
Required Field

const field = new Input('name', 'Name').apply({
  validator: Validators.required,
  errorMessage: 'Name is required'
});

​
Email Validation

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

​
Pattern Matching (Phone Number)

const field = new Input('phone', 'Phone Number').apply({
  validator: [Validators.required, Validators.pattern(/^\d{10}$/)],
  errorMessage: 'Phone must be 10 digits',
  hint: 'Format: 1234567890'
});

​
Min/Max Length

const field = new Input('username', 'Username').apply({
  validator: [
    Validators.required,
    Validators.minLength(3),
    Validators.maxLength(20)
  ],
  errorMessage: 'Username must be 3-20 characters'
});

​
Custom Validator

import { AbstractControl, ValidationErrors } from '@angular/forms';

function noSpacesValidator(control: AbstractControl): ValidationErrors | null {
  if (control.value && control.value.includes(' ')) {
    return { noSpaces: true };
  }
  return null;
}

const field = new Input('username', 'Username').apply({
  validator: [Validators.required, noSpacesValidator],
  errorMessage: 'Username cannot contain spaces'
});

​
Best Practices

Use appropriate icons - Icons help users quickly identify field purpose. Use 'person' for names, 'email' for emails, 'phone' for phone numbers, etc.
Provide helpful hints - Use the hint property to give users context about what to enter or format requirements.
Don’t rely solely on placeholders - Placeholders disappear when users start typing. Use labels and hints for important information.
Combine validators - Use multiple validators together for robust validation:
validator: [
  Validators.required,
  Validators.minLength(8),
  Validators.pattern(/^(?=.*[A-Za-z])(?=.*\d)/)
]

​
Complete Example

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

@Component({
  selector: 'app-contact-form',
  template: '<mat-dynamic-form [structure]="formStructure"></mat-dynamic-form>'
})
export class ContactFormComponent {
  formStructure: FormStructure;

  constructor() {
    this.formStructure = new FormStructure('Contact Information');
    this.formStructure.appearance = 'outline';
    this.formStructure.nodeGrid = 2;

    this.formStructure.nodes = [
      new Input('firstName', 'First Name').apply({
        icon: 'person',
        validator: Validators.required,
        autoFocus: true
      }),

      new Input('lastName', 'Last Name').apply({
        validator: Validators.required
      }),

      new Input('email', 'Email Address').apply({
        icon: 'email',
        validator: [Validators.required, Validators.email],
        errorMessage: 'Please enter a valid email',
        singleLine: true
      }),

      new Input('phone', 'Phone Number').apply({
        icon: 'phone',
        validator: [Validators.required, Validators.pattern(/^\d{10}$/)],
        hint: 'Format: 1234567890',
        maxCharCount: 10
      }),

      new Input('company', 'Company Name').apply({
        icon: 'business',
        maxCharCount: 100
      }),

      new Input('website', 'Website').apply({
        icon: 'language',
        validator: Validators.pattern(/^https?:\/\/.+/),
        hint: 'Must start with http:// or https://'
      })
    ];
  }
}

Textarea

Multi-line text input for longer content

Input File

File upload with validation

​
See Also

  • Validators - Learn about all available validators
  • Actions - Handle input events and interactions
  • Form Structure - Understanding form layout and configuration

Build docs developers (and LLMs) love

Get started for freeTalk to us