🚨 Announcement: A New Chapter for Vendure read more

default-inputs

BooleanFormInputComponent

A checkbox input. The default input component for boolean fields.

Signature

class BooleanFormInputComponent implements FormInputComponent {
  static readonly static readonly id: DefaultFormComponentId = 'boolean-form-input';
  readonly: boolean;
  formControl: FormControl;
  config: DefaultFormComponentConfig<'boolean-form-input'>;
}

Implements

Members

id

static readonly property

readonly

property
type:
boolean

formControl

property
type:
FormControl

config

property
type:
DefaultFormComponentConfig<'boolean-form-input'>

HtmlEditorFormInputComponent

A JSON editor input with syntax highlighting and error detection. Works well with text type fields.

Signature

class HtmlEditorFormInputComponent extends BaseCodeEditorFormInputComponent implements FormInputComponent, AfterViewInit, OnInit {
  static readonly static readonly id: DefaultFormComponentId = 'html-editor-form-input';
  constructor(changeDetector: ChangeDetectorRef)
  ngOnInit() => ;
}

Extends

  • BaseCodeEditorFormInputComponent

Implements

Members

id

static readonly property

constructor

method
type:
(changeDetector: ChangeDetectorRef) => HtmlEditorFormInputComponent

ngOnInit

method
type:
() =>

JsonEditorFormInputComponent

A JSON editor input with syntax highlighting and error detection. Works well with text type fields.

Signature

class JsonEditorFormInputComponent extends BaseCodeEditorFormInputComponent implements FormInputComponent, AfterViewInit, OnInit {
  static readonly static readonly id: DefaultFormComponentId = 'json-editor-form-input';
  constructor(changeDetector: ChangeDetectorRef)
  ngOnInit() => ;
}

Extends

  • BaseCodeEditorFormInputComponent

Implements

Members

id

static readonly property

constructor

method
type:
(changeDetector: ChangeDetectorRef) => JsonEditorFormInputComponent

ngOnInit

method
type:
() =>

CombinationModeFormInputComponent

A special input used to display the “Combination mode” AND/OR toggle.

Signature

class CombinationModeFormInputComponent implements FormInputComponent, OnInit {
  static readonly static readonly id: DefaultFormComponentId = 'combination-mode-form-input';
  readonly: boolean;
  formControl: FormControl;
  config: DefaultFormComponentConfig<'combination-mode-form-input'>;
  selectable$: Observable<boolean>;
  constructor(configurableInputComponent: ConfigurableInputComponent)
  ngOnInit() => ;
  setCombinationModeAnd() => ;
  setCombinationModeOr() => ;
}

Implements

Members

id

static readonly property

readonly

property
type:
boolean

formControl

property
type:
FormControl

config

property
type:
DefaultFormComponentConfig<'combination-mode-form-input'>

selectable$

property
type:
Observable<boolean>

constructor

method
type:
(configurableInputComponent: ConfigurableInputComponent) => CombinationModeFormInputComponent

ngOnInit

method
type:
() =>

setCombinationModeAnd

method
type:
() =>

setCombinationModeOr

method
type:
() =>

CurrencyFormInputComponent

An input for monetary values. Should be used with int type fields.

Signature

class CurrencyFormInputComponent implements FormInputComponent {
  static readonly static readonly id: DefaultFormComponentId = 'currency-form-input';
  @Input() readonly: boolean;
  formControl: FormControl;
  currencyCode$: Observable<CurrencyCode>;
  config: DefaultFormComponentConfig<'currency-form-input'>;
  constructor(dataService: DataService)
}

Implements

Members

id

static readonly property

readonly

property
type:
boolean

formControl

property
type:
FormControl

currencyCode$

property
type:
Observable<CurrencyCode>

config

property
type:
DefaultFormComponentConfig<'currency-form-input'>

constructor

method
type:
(dataService: DataService) => CurrencyFormInputComponent

CustomerGroupFormInputComponent

Allows the selection of a Customer via an autocomplete select input. Should be used with ID type fields which represent Customer IDs.

Signature

class CustomerGroupFormInputComponent implements FormInputComponent, OnInit {
  static readonly static readonly id: DefaultFormComponentId = 'customer-group-form-input';
  @Input() readonly: boolean;
  formControl: FormControl;
  customerGroups$: Observable<GetCustomerGroups.Items[]>;
  config: DefaultFormComponentConfig<'customer-group-form-input'>;
  constructor(dataService: DataService)
  ngOnInit() => ;
  selectGroup(group: GetCustomerGroups.Items) => ;
}

Implements

Members

id

static readonly property

readonly

property
type:
boolean

formControl

property
type:
FormControl

customerGroups$

property
type:
Observable<GetCustomerGroups.Items[]>

config

property
type:
DefaultFormComponentConfig<'customer-group-form-input'>

constructor

method
type:
(dataService: DataService) => CustomerGroupFormInputComponent

ngOnInit

method
type:
() =>

selectGroup

method
type:
(group: GetCustomerGroups.Items) =>

DateFormInputComponent

Allows selection of a datetime. Default input for datetime type fields.

Signature

class DateFormInputComponent implements FormInputComponent {
  static readonly static readonly id: DefaultFormComponentId = 'date-form-input';
  @Input() readonly: boolean;
  formControl: FormControl;
  config: DefaultFormComponentConfig<'date-form-input'>;
  min: void
  max: void
  yearRange: void
}

Implements

Members

id

static readonly property

readonly

property
type:
boolean

formControl

property
type:
FormControl

config

property
type:
DefaultFormComponentConfig<'date-form-input'>

min

property
type:

max

property
type:

yearRange

property
type:

FacetValueFormInputComponent

Allows the selection of multiple FacetValues via an autocomplete select input. Should be used with ID type list fields which represent FacetValue IDs.

Signature

class FacetValueFormInputComponent implements FormInputComponent, OnInit {
  static readonly static readonly id: DefaultFormComponentId = 'facet-value-form-input';
  readonly readonly isListInput = true;
  readonly: boolean;
  formControl: FormControl;
  facets$: Observable<FacetWithValues.Fragment[]>;
  config: InputComponentConfig;
  constructor(dataService: DataService)
  ngOnInit() => ;
  valueTransformFn = (values: FacetValueSeletorItem[]) => {
        const isUsedInConfigArg = this.config.__typename === 'ConfigArgDefinition';
        if (isUsedInConfigArg) {
            return JSON.stringify(values.map(s => s.id));
        } else {
            return values;
        }
    };
}

Implements

Members

id

static readonly property

isListInput

readonly property
type:

readonly

property
type:
boolean

formControl

property
type:
FormControl

facets$

property
type:
Observable<FacetWithValues.Fragment[]>

config

property
type:
InputComponentConfig

constructor

method
type:
(dataService: DataService) => FacetValueFormInputComponent

ngOnInit

method
type:
() =>

valueTransformFn

property
type:

NumberFormInputComponent

Displays a number input. Default input for int and float type fields.

Signature

class NumberFormInputComponent implements FormInputComponent {
  static readonly static readonly id: DefaultFormComponentId = 'number-form-input';
  @Input() readonly: boolean;
  formControl: FormControl;
  config: DefaultFormComponentConfig<'number-form-input'>;
  prefix: void
  suffix: void
  min: void
  max: void
  step: void
}

Implements

Members

id

static readonly property

readonly

property
type:
boolean

formControl

property
type:
FormControl

config

property
type:
DefaultFormComponentConfig<'number-form-input'>

prefix

property
type:

suffix

property
type:

min

property
type:

max

property
type:

step

property
type:

PasswordFormInputComponent

Displays a password text input. Should be used with string type fields.

Signature

class PasswordFormInputComponent implements FormInputComponent {
  static readonly static readonly id: DefaultFormComponentId = 'password-form-input';
  readonly: boolean;
  formControl: FormControl;
  config: InputComponentConfig;
}

Implements

Members

id

static readonly property

readonly

property
type:
boolean

formControl

property
type:
FormControl

config

property
type:
InputComponentConfig

ProductSelectorFormInputComponent

Allows the selection of multiple ProductVariants via an autocomplete select input. Should be used with ID type list fields which represent ProductVariant IDs.

Signature

class ProductSelectorFormInputComponent implements FormInputComponent, OnInit {
  static readonly static readonly id: DefaultFormComponentId = 'product-selector-form-input';
  readonly readonly isListInput = true;
  readonly: boolean;
  formControl: FormControl;
  config: InputComponentConfig;
  selection$: Observable<GetProductVariant.ProductVariant[]>;
  constructor(dataService: DataService)
  ngOnInit() => ;
  addProductVariant(product: ProductSelectorSearch.Items) => ;
  removeProductVariant(id: string) => ;
}

Implements

Members

id

static readonly property

isListInput

readonly property
type:

readonly

property
type:
boolean

formControl

property
type:
FormControl

config

property
type:
InputComponentConfig

selection$

property
type:
Observable<GetProductVariant.ProductVariant[]>

constructor

method
type:
(dataService: DataService) => ProductSelectorFormInputComponent

ngOnInit

method
type:
() =>

addProductVariant

method
type:
(product: ProductSelectorSearch.Items) =>

removeProductVariant

method
type:
(id: string) =>

RelationFormInputComponent

The default input component for relation type custom fields. Allows the selection of a ProductVariant, Product, Customer or Asset. For other entity types, a custom implementation will need to be defined. See registerFormInputComponent.

Signature

class RelationFormInputComponent implements FormInputComponent {
  static readonly static readonly id: DefaultFormComponentId = 'relation-form-input';
  @Input() readonly: boolean;
  formControl: FormControl;
  config: RelationCustomFieldConfig;
}

Implements

Members

id

static readonly property

readonly

property
type:
boolean

formControl

property
type:
FormControl

config

property
type:
RelationCustomFieldConfig

RichTextFormInputComponent

Uses the RichTextEditorComponent as in input for text type fields.

Signature

class RichTextFormInputComponent implements FormInputComponent {
  static readonly static readonly id: DefaultFormComponentId = 'rich-text-form-input';
  readonly: boolean;
  formControl: FormControl;
  config: DefaultFormComponentConfig<'rich-text-form-input'>;
}

Implements

Members

id

static readonly property

readonly

property
type:
boolean

formControl

property
type:
FormControl

config

property
type:
DefaultFormComponentConfig<'rich-text-form-input'>

SelectFormInputComponent

Uses a select input to allow the selection of a string value. Should be used with string type fields with options.

Signature

class SelectFormInputComponent implements FormInputComponent, OnInit {
  static readonly static readonly id: DefaultFormComponentId = 'select-form-input';
  @Input() readonly: boolean;
  formControl: FormControl;
  config: DefaultFormComponentConfig<'select-form-input'> & CustomFieldConfigFragment;
  uiLanguage$: Observable<LanguageCode>;
  options: void
  constructor(dataService: DataService)
  ngOnInit() => ;
  trackByFn(index: number, item: any) => ;
}

Implements

Members

id

static readonly property

readonly

property
type:
boolean

formControl

property
type:
FormControl

config

property
type:
DefaultFormComponentConfig<'select-form-input'> & CustomFieldConfigFragment

uiLanguage$

property
type:
Observable<LanguageCode>

options

property
type:

constructor

method
type:
(dataService: DataService) => SelectFormInputComponent

ngOnInit

method
type:
() =>

trackByFn

method
type:
(index: number, item: any) =>

TextFormInputComponent

Uses a regular text form input. This is the default input for string and localeString type fields.

Signature

class TextFormInputComponent implements FormInputComponent {
  static readonly static readonly id: DefaultFormComponentId = 'text-form-input';
  readonly: boolean;
  formControl: FormControl;
  config: DefaultFormComponentConfig<'text-form-input'>;
  prefix: void
  suffix: void
}

Implements

Members

id

static readonly property

readonly

property
type:
boolean

formControl

property
type:
FormControl

config

property
type:
DefaultFormComponentConfig<'text-form-input'>

prefix

property
type:

suffix

property
type:

TextareaFormInputComponent

Uses textarea form input. This is the default input for text type fields.

Signature

class TextareaFormInputComponent implements FormInputComponent {
  static readonly static readonly id: DefaultFormComponentId = 'textarea-form-input';
  readonly: boolean;
  formControl: FormControl;
  config: DefaultFormComponentConfig<'textarea-form-input'>;
  spellcheck: boolean
}

Implements

Members

id

static readonly property

readonly

property
type:
boolean

formControl

property
type:
FormControl

config

property
type:
DefaultFormComponentConfig<'textarea-form-input'>

spellcheck

property
type:
boolean