Quantity Field

Quantity field is a form control element that switches between a native select and input element.

Components

DaffQuantityFieldComponent

import { DaffQuantityFieldComponent } from '@daffodil/design/quantity-field'

@Component()
class DaffQuantityFieldComponent extends DaffFormFieldControl<number> implements ControlValueAccessor, DaffFormFieldControl<number> {
  @ViewChild() input: DaffQuantityInputComponent
  @ViewChild() select: DaffQuantitySelectComponent
  get focused(): boolean
  quantity: number
  get _maxFloor(): number
  get controlType(): "native-input" | "native-select"
  get showInputField(): boolean
  get showSelectField(): boolean
  @Optional() @Self() ngControl: NgControl
  get value()
  readonly supportsAutoLabelling: boolean = true
  get raised(): boolean
  get state(): DaffFormFieldState
  _stateChanges: BehaviorSubject = new BehaviorSubject({
      focused: false,
      filled: false,
      disabled: false,
      error: false,
      valid: true,
    })
  stateChanges: Observable<DaffFormFieldState>

  @Input() min: number = 1
  @Input() max: number = 500
  @Input() selectMax: number = 10
  @Input() id: string = ''

  writeValue(quantity: number): void
  registerOnChange(fn: (quantity: number) => void): void
  registerOnTouched(fn: any): void
  setDisabledState(isDisabled: boolean): void
  focus(): void
  emitState(deferred: boolean = false): void
}

Inputs

min

number

Default	`1`
Description

max

number

Default	`500`
Description

selectMax

number

Default	`10`
Description

string

Default	`''`
Description

Properties

input

DaffQuantityInputComponent

Default	–
Description

select

DaffQuantitySelectComponent

Default	–
Description

focused

boolean

Default	–
Description

quantity

number

Default	–
Description

_maxFloor

number

Default	–
Description	Returns the lesser of max and selectMax.

controlType

"native-input" | "native-select"

Default	–
Description

showInputField

boolean

Default	–
Description

showSelectField

boolean

Default	–
Description

ngControl

NgControl

Default	–
Description

value

Default	–
Description

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.

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	`quantity: number`
Description

Parameters

Parameter	`fn: (quantity: number) => void`
Description

Parameters

Parameter	`fn: any`
Description

Parameters

Parameter	`isDisabled: boolean`
Description

Parameters

Parameter	`deferred: boolean`
Default	false
Description

Modules

DaffQuantityFieldModule

Deprecated

import { DaffQuantityFieldModule } from '@daffodil/design/quantity-field'

@NgModule()
class DaffQuantityFieldModule {}