Skip to main content

Default Inputs

BooleanFormInputComponent​

@vendure/admin-uiboolean-form-input.component.ts

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

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

id​

property
DefaultFormComponentId

readonly​

property
boolean

formControl​

property
UntypedFormControl

config​

property
DefaultFormComponentConfig<'boolean-form-input'>

HtmlEditorFormInputComponent​

@vendure/admin-uihtml-editor-form-input.component.ts

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 id: DefaultFormComponentId = 'html-editor-form-input';
    constructor(changeDetector: ChangeDetectorRef)
    ngOnInit() => ;
}

  • Extends: BaseCodeEditorFormInputComponent

  • Implements: FormInputComponent, AfterViewInit, OnInit

id​

property
DefaultFormComponentId

constructor​

method
(changeDetector: ChangeDetectorRef) => HtmlEditorFormInputComponent

ngOnInit​

method
() =>

JsonEditorFormInputComponent​

@vendure/admin-uijson-editor-form-input.component.ts

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 id: DefaultFormComponentId = 'json-editor-form-input';
    constructor(changeDetector: ChangeDetectorRef)
    ngOnInit() => ;
}

  • Extends: BaseCodeEditorFormInputComponent

  • Implements: FormInputComponent, AfterViewInit, OnInit

id​

property
DefaultFormComponentId

constructor​

method
(changeDetector: ChangeDetectorRef) => JsonEditorFormInputComponent

ngOnInit​

method
() =>

CombinationModeFormInputComponent​

@vendure/admin-uicombination-mode-form-input.component.ts

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

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

id​

property
DefaultFormComponentId

readonly​

property
boolean

formControl​

property
UntypedFormControl

config​

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

selectable$​

property
Observable<boolean>

constructor​

method
(configurableInputComponent: ConfigurableInputComponent) => CombinationModeFormInputComponent

ngOnInit​

method
() =>

setCombinationModeAnd​

method
() =>

setCombinationModeOr​

method
() =>

CurrencyFormInputComponent​

@vendure/admin-uicurrency-form-input.component.ts

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

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

id​

property
DefaultFormComponentId

readonly​

property
boolean

formControl​

property
UntypedFormControl

currencyCode$​

property
Observable<CurrencyCode>

config​

property
DefaultFormComponentConfig<'currency-form-input'>

constructor​

method
(dataService: DataService) => CurrencyFormInputComponent

CustomerGroupFormInputComponent​

@vendure/admin-uicustomer-group-form-input.component.ts

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 id: DefaultFormComponentId = 'customer-group-form-input';
    @Input() readonly: boolean;
    formControl: FormControl<string | { id: string }>;
    customerGroups$: Observable<GetCustomerGroupsQuery['customerGroups']['items']>;
    config: DefaultFormComponentConfig<'customer-group-form-input'>;
    constructor(dataService: DataService)
    ngOnInit() => ;
    selectGroup(group: ItemOf<GetCustomerGroupsQuery, 'customerGroups'>) => ;
    compareWith(o1: T, o2: T) => ;
}

id​

property
DefaultFormComponentId

readonly​

property
boolean

formControl​

property
FormControl<string | { id: string }>

customerGroups$​

property
Observable<GetCustomerGroupsQuery['customerGroups']['items']>

config​

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

constructor​

method
(dataService: DataService) => CustomerGroupFormInputComponent

ngOnInit​

method
() =>

selectGroup​

method
(group: ItemOf<GetCustomerGroupsQuery, 'customerGroups'>) =>

compareWith​

method
(o1: T, o2: T) =>

DateFormInputComponent​

@vendure/admin-uidate-form-input.component.ts

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

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

id​

property
DefaultFormComponentId

readonly​

property
boolean

formControl​

property
UntypedFormControl

config​

property
DefaultFormComponentConfig<'date-form-input'>

min​

property

max​

property

yearRange​

property

FacetValueFormInputComponent​

@vendure/admin-uifacet-value-form-input.component.ts

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 {
    static readonly id: DefaultFormComponentId = 'facet-value-form-input';
    readonly isListInput = true;
    readonly: boolean;
    formControl: UntypedFormControl;
    config: InputComponentConfig;
    valueTransformFn = (values: FacetValueFragment[]) => {
        const isUsedInConfigArg = this.config.__typename === 'ConfigArgDefinition';
        if (isUsedInConfigArg) {
            return JSON.stringify(values.map(s => s.id));
        } else {
            return values;
        }
    };
}

id​

property
DefaultFormComponentId

isListInput​

property

readonly​

property
boolean

formControl​

property
UntypedFormControl

config​

property
InputComponentConfig

valueTransformFn​

property

NumberFormInputComponent​

@vendure/admin-uinumber-form-input.component.ts

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

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

id​

property
DefaultFormComponentId

readonly​

property
boolean

formControl​

property
UntypedFormControl

config​

property
DefaultFormComponentConfig<'number-form-input'>

prefix​

property

suffix​

property

min​

property

max​

property

step​

property

PasswordFormInputComponent​

@vendure/admin-uipassword-form-input.component.ts

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

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

id​

property
DefaultFormComponentId

readonly​

property
boolean

formControl​

property
UntypedFormControl

config​

property
InputComponentConfig

ProductSelectorFormInputComponent​

@vendure/admin-uiproduct-selector-form-input.component.ts

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 id: DefaultFormComponentId = 'product-selector-form-input';
    readonly isListInput = true;
    readonly: boolean;
    formControl: FormControl<Array<string | { id: string }>>;
    config: DefaultFormComponentUiConfig<'product-selector-form-input'>;
    selection$: Observable<Array<GetProductVariantQuery['productVariant']>>;
    constructor(dataService: DataService)
    ngOnInit() => ;
    addProductVariant(product: ProductSelectorSearchQuery['search']['items'][number]) => ;
    removeProductVariant(id: string) => ;
}

id​

property
DefaultFormComponentId

isListInput​

property

readonly​

property
boolean

formControl​

property
FormControl<Array<string | { id: string }>>

config​

property
DefaultFormComponentUiConfig<'product-selector-form-input'>

selection$​

property
Observable<Array<GetProductVariantQuery['productVariant']>>

constructor​

method
(dataService: DataService) => ProductSelectorFormInputComponent

ngOnInit​

method
() =>

addProductVariant​

method
(product: ProductSelectorSearchQuery['search']['items'][number]) =>

removeProductVariant​

method
(id: string) =>

RelationFormInputComponent​

@vendure/admin-uirelation-form-input.component.ts

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 id: DefaultFormComponentId = 'relation-form-input';
    @Input() readonly: boolean;
    formControl: UntypedFormControl;
    config: RelationCustomFieldConfig;
}

id​

property
DefaultFormComponentId

readonly​

property
boolean

formControl​

property
UntypedFormControl

config​

property
RelationCustomFieldConfig

RichTextFormInputComponent​

@vendure/admin-uirich-text-form-input.component.ts

Uses the RichTextEditorComponent as in input for text type fields.

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

id​

property
DefaultFormComponentId

readonly​

property
boolean

formControl​

property
UntypedFormControl

config​

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

SelectFormInputComponent​

@vendure/admin-uiselect-form-input.component.ts

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 id: DefaultFormComponentId = 'select-form-input';
    @Input() readonly: boolean;
    formControl: UntypedFormControl;
    config: DefaultFormComponentConfig<'select-form-input'> & CustomFieldConfigFragment;
    uiLanguage$: Observable<LanguageCode>;
    options: void
    constructor(dataService: DataService)
    ngOnInit() => ;
    trackByFn(index: number, item: any) => ;
}

id​

property
DefaultFormComponentId

readonly​

property
boolean

formControl​

property
UntypedFormControl

config​

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

uiLanguage$​

property
Observable<LanguageCode>

options​

property

constructor​

method
(dataService: DataService) => SelectFormInputComponent

ngOnInit​

method
() =>

trackByFn​

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

TextFormInputComponent​

@vendure/admin-uitext-form-input.component.ts

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

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

id​

property
DefaultFormComponentId

readonly​

property
boolean

formControl​

property
UntypedFormControl

config​

property
DefaultFormComponentConfig<'text-form-input'>

prefix​

property

suffix​

property

TextareaFormInputComponent​

@vendure/admin-uitextarea-form-input.component.ts

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

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

id​

property
DefaultFormComponentId

readonly​

property
boolean

formControl​

property
UntypedFormControl

config​

property
DefaultFormComponentConfig<'textarea-form-input'>

spellcheck​

property
boolean