Text-based input fields for collecting typed data from users.

input

Text-based input with HTML5 type support.

{
  key: 'email',
  type: 'input',
  value: '',
  label: 'Email',
  required: true,
  email: true,
  placeholder: 'user@example.com',
  props: {
    type: 'email',              // 'text' | 'email' | 'password' | 'number' | 'tel' | 'url'
  }
}

Core Props:

type: HTML input type ('text' | 'email' | 'password' | 'number' | 'tel' | 'url')
placeholder: Input placeholder text

Adapter Props

Compose NgForgeField via hostDirectives and register the field type with valueFieldMapper. See Building an Adapter for the full guide.

// my-input.component.ts
import { ChangeDetectionStrategy, Component, input } from '@angular/core';
import {
  injectNgForgeField,
  NgForgeControl,
  NgForgeFieldHost,
  type InputField,
} from '@ng-forge/dynamic-forms/integration';

@Component({
  selector: 'my-input',
  imports: [NgForgeControl],
  hostDirectives: [NgForgeFieldHost],
  template: `<!-- mark the control element with ngForgeControl so meta + aria land there -->`,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export default class MyInputComponent {
  protected readonly ngf = injectNgForgeField<string>();
  readonly props = input<InputField['props']>();
}

// my-input.type.ts
import type { FieldTypeDefinition } from '@ng-forge/dynamic-forms';
import { valueFieldMapper } from '@ng-forge/dynamic-forms/integration';

export const MyInputType: FieldTypeDefinition = {
  name: 'input',
  loadComponent: () => import('./my-input.component'),
  mapper: valueFieldMapper,
};

textarea

Multi-line text input.

{
  key: 'bio',
  type: 'textarea',
  value: '',
  label: 'Biography',
  maxLength: 500,
  placeholder: 'Tell us about yourself',
  props: {
    rows: 4,
  }
}

Core Props:

placeholder: Placeholder text
rows: Number of visible text rows

Adapter Props

Compose NgForgeField via hostDirectives and register the field type with valueFieldMapper. See Building an Adapter for the full guide.

// my-textarea.component.ts
import { ChangeDetectionStrategy, Component, input } from '@angular/core';
import {
  injectNgForgeField,
  NgForgeControl,
  NgForgeFieldHost,
  type TextareaField,
} from '@ng-forge/dynamic-forms/integration';

@Component({
  selector: 'my-textarea',
  imports: [NgForgeControl],
  hostDirectives: [NgForgeFieldHost],
  template: `<!-- mark the control element with ngForgeControl so meta + aria land there -->`,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export default class MyTextareaComponent {
  protected readonly ngf = injectNgForgeField<string>();
  readonly props = input<TextareaField['props']>();
}

// my-textarea.type.ts
import type { FieldTypeDefinition } from '@ng-forge/dynamic-forms';
import { valueFieldMapper } from '@ng-forge/dynamic-forms/integration';

export const MyTextareaType: FieldTypeDefinition = {
  name: 'textarea',
  loadComponent: () => import('./my-textarea.component'),
  mapper: valueFieldMapper,
};