Quantity Field

Quantity field is a form control element that switches between native select dropdown and input field based on the quantity value.

Usage

API

Components

DaffSfQuantityFieldComponent

import { DaffSfQuantityFieldComponent } from '@daffodil/storefront/quantity-field'

@Component()
class DaffSfQuantityFieldComponent extends DaffFormFieldControl<number> implements ControlValueAccessor, DaffFormFieldControl<number>, OnInit {
  _destroyed: Subject<boolean> = new Subject<boolean>()
  @Optional() @Self() ngControl: NgControl
  get value(): number
  readonly supportsAutoLabelling: boolean = true
  readonly id: string
  get raised(): boolean
  get state(): DaffFormFieldState
  _stateChanges: BehaviorSubject = new BehaviorSubject({
      focused: false,
      filled: false,
      disabled: false,
      error: false,
      valid: true,
    })
  stateChanges: Observable<DaffFormFieldState>

  min: InputSignal<number> = input(1)
  max: InputSignal<number> = input(500)
  selectMax: InputSignal<number> = input(10)

  emitState(deferred: boolean = false): void
}

Inputs

min

InputSignal

Default	`input(1)`
Description	The minimum valid value of the quantity field. Must be greater than or equal to 1.

max

InputSignal

Default	`input(500)`
Description	The maximum valid value of the quantity field. Must be greater than `min`.

selectMax

InputSignal

Default	`input(10)`
Description	The maximum number allowed before the field switches from a dropdown to an input. When the value reaches this number, an input field is shown instead of a select. Default is 10.

Properties

_destroyed

Subject

Default	`new Subject<boolean>()`
Description

ngControl

NgControl

Default	–
Description

value

number

Default	–
Description	Implemented as part of DaffFormFieldControl.

supportsAutoLabelling

boolean

Default true

Description

Default	`true`
Description	Whether the control supports automatic label behavior. When `true`, the form field will associate the label with the control using `for` and `id` attributes. Defaults to `true`.

Whether the control supports automatic label behavior. When true, the form field will associate the label with the control using for and id attributes.

Defaults to true.

string

Default	–
Description	The unique identifier for the control element.

raised

boolean

Default	–
Description	Whether the label should be in the raised position. By default, matches the focused state.

state

DaffFormFieldState

Default	–
Description	Computes the current state of the form field control. Combines control properties and form validation state.

_stateChanges

BehaviorSubject

Default	`new BehaviorSubject({ focused: false, filled: false, disabled: false, error: false, valid: true, })`
Description

stateChanges

Observable

Default	–
Description	Observable stream of state changes for the form field control.

() Methods

Parameters

Parameter	`deferred: boolean`
Default	false
Description