Specialized controls for numeric ranges and date selection.

slider

Numeric range selection.

{
  key: 'volume',
  type: 'slider',
  label: 'Volume',
  value: 50,
  minValue: 0,    // optional
  maxValue: 100,  // optional
  step: 5,        // optional
}

Core Properties (all optional):

  • minValue: Minimum slider value
  • maxValue: Maximum slider value
  • step: Step increment value

Adapter Props

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

import { Component, input } from '@angular/core';
import type { SliderField, 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-slider', template: '<!-- your template -->' })
export default class MySliderComponent implements ValueFieldComponent<SliderField> {
  readonly field = input.required();
  readonly key = input.required<string>();
  readonly props = input<SliderField['props']>();
  readonly meta = input<FieldMeta>();
}

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

Example

datepicker

Date selection control.

{
  key: 'birthDate',
  type: 'datepicker',
  label: 'Birth Date',
  value: null,
  required: true,
  minDate: new Date(1900, 0, 1),  // optional
  maxDate: new Date(),            // optional
  placeholder: 'Select your birth date',
}

Core Properties (all optional):

  • minDate: Minimum selectable date — Date | string | null
  • maxDate: Maximum selectable date — Date | string | null
  • startAt: Initial calendar view date — Date | null

Core Props:

  • placeholder: Placeholder text
  • format: Date format string (UI-integration specific)

Adapter Props

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

import { Component, input } from '@angular/core';
import type { DatepickerField, 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-datepicker', template: '<!-- your template -->' })
export default class MyDatepickerComponent implements ValueFieldComponent<DatepickerField> {
  readonly field = input.required();
  readonly key = input.required<string>();
  readonly props = input<DatepickerField['props']>();
  readonly meta = input<FieldMeta>();
}

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

Example