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

Implement ValueFieldComponent<InputField>. See Building an Adapter for the full guide. 

import { Component, input } from '@angular/core';
import type { InputField, FieldMeta } from '@ng-forge/dynamic-forms/integration';
import { valueFieldMapper } from '@ng-forge/dynamic-forms/integration';
import type { ValueFieldComponent, FieldTypeDefinition } from '@ng-forge/dynamic-forms';

@Component({ selector: 'my-input', template: '<!-- your template -->' })
export default class MyInputComponent implements ValueFieldComponent<InputField> {
  readonly field = input.required();
  readonly key = input.required<string>();
  readonly props = input<InputField['props']>();
  readonly meta = input<FieldMeta>();
}

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

Example

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

Implement ValueFieldComponent<TextareaField>. See Building an Adapter for the full guide. 

import { Component, input } from '@angular/core';
import type { TextareaField, FieldMeta } from '@ng-forge/dynamic-forms/integration';
import { valueFieldMapper } from '@ng-forge/dynamic-forms/integration';
import type { ValueFieldComponent, FieldTypeDefinition } from '@ng-forge/dynamic-forms';

@Component({ selector: 'my-textarea', template: '<!-- your template -->' })
export default class MyTextareaComponent implements ValueFieldComponent<TextareaField> {
  readonly field = input.required();
  readonly key = input.required<string>();
  readonly props = input<TextareaField['props']>();
  readonly meta = input<FieldMeta>();
}

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

Example