GitHub

Quantity Field

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

Components

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()

  @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
}

Inputs

min
number
Default1
Description
max
number
Default500
Description
selectMax
number
Default10
Description
id
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

() Methods

writeValue
void
Parameters
Parameterquantity: number
Description
registerOnChange
void
Parameters
Parameterfn: (quantity: number) => void
Description
registerOnTouched
void
Parameters
Parameterfn: any
Description
setDisabledState
void
Parameters
ParameterisDisabled: boolean
Description
focus
void

Modules

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

@NgModule()
class DaffQuantityFieldModule {}