default-inputs.md 30 KB


title: "Default Inputs" weight: 10 date: 2023-06-07T09:42:25.877Z showtoc: true

generated: true

default-inputs

# BooleanFormInputComponent {{< generation-info sourceFile="packages/admin-ui/src/lib/core/src/shared/dynamic-form-inputs/boolean-form-input/boolean-form-input.component.ts" sourceLine="14" packageName="@vendure/admin-ui">}} A checkbox input. The default input component for `boolean` fields. ## Signature ```TypeScript class BooleanFormInputComponent implements FormInputComponent { static readonly static readonly id: DefaultFormComponentId = 'boolean-form-input'; readonly: boolean; formControl: UntypedFormControl; config: DefaultFormComponentConfig<'boolean-form-input'>; } ``` ## Implements * FormInputComponent ## Members ### id {{< member-info kind="property" type="DefaultFormComponentId" >}} {{< member-description >}}{{< /member-description >}} ### readonly {{< member-info kind="property" type="boolean" >}} {{< member-description >}}{{< /member-description >}} ### formControl {{< member-info kind="property" type="UntypedFormControl" >}} {{< member-description >}}{{< /member-description >}} ### config {{< member-info kind="property" type="DefaultFormComponentConfig<'boolean-form-input'>" >}} {{< member-description >}}{{< /member-description >}}
# HtmlEditorFormInputComponent {{< generation-info sourceFile="packages/admin-ui/src/lib/core/src/shared/dynamic-form-inputs/code-editor-form-input/html-editor-form-input.component.ts" sourceLine="23" packageName="@vendure/admin-ui">}} A JSON editor input with syntax highlighting and error detection. Works well with `text` type fields. ## Signature ```TypeScript 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 * FormInputComponent * AfterViewInit * OnInit ## Members ### id {{< member-info kind="property" type="DefaultFormComponentId" >}} {{< member-description >}}{{< /member-description >}} ### constructor {{< member-info kind="method" type="(changeDetector: ChangeDetectorRef) => HtmlEditorFormInputComponent" >}} {{< member-description >}}{{< /member-description >}} ### ngOnInit {{< member-info kind="method" type="() => " >}} {{< member-description >}}{{< /member-description >}}
# JsonEditorFormInputComponent {{< generation-info sourceFile="packages/admin-ui/src/lib/core/src/shared/dynamic-form-inputs/code-editor-form-input/json-editor-form-input.component.ts" sourceLine="33" packageName="@vendure/admin-ui">}} A JSON editor input with syntax highlighting and error detection. Works well with `text` type fields. ## Signature ```TypeScript 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 * FormInputComponent * AfterViewInit * OnInit ## Members ### id {{< member-info kind="property" type="DefaultFormComponentId" >}} {{< member-description >}}{{< /member-description >}} ### constructor {{< member-info kind="method" type="(changeDetector: ChangeDetectorRef) => JsonEditorFormInputComponent" >}} {{< member-description >}}{{< /member-description >}} ### ngOnInit {{< member-info kind="method" type="() => " >}} {{< member-description >}}{{< /member-description >}}
# CombinationModeFormInputComponent {{< generation-info sourceFile="packages/admin-ui/src/lib/core/src/shared/dynamic-form-inputs/combination-mode-form-input/combination-mode-form-input.component.ts" sourceLine="17" packageName="@vendure/admin-ui">}} A special input used to display the "Combination mode" AND/OR toggle. ## Signature ```TypeScript class CombinationModeFormInputComponent implements FormInputComponent, OnInit { static readonly static readonly id: DefaultFormComponentId = 'combination-mode-form-input'; readonly: boolean; formControl: UntypedFormControl; config: DefaultFormComponentConfig<'combination-mode-form-input'>; selectable$: Observable; constructor(configurableInputComponent: ConfigurableInputComponent) ngOnInit() => ; setCombinationModeAnd() => ; setCombinationModeOr() => ; } ``` ## Implements * FormInputComponent * OnInit ## Members ### id {{< member-info kind="property" type="DefaultFormComponentId" >}} {{< member-description >}}{{< /member-description >}} ### readonly {{< member-info kind="property" type="boolean" >}} {{< member-description >}}{{< /member-description >}} ### formControl {{< member-info kind="property" type="UntypedFormControl" >}} {{< member-description >}}{{< /member-description >}} ### config {{< member-info kind="property" type="DefaultFormComponentConfig<'combination-mode-form-input'>" >}} {{< member-description >}}{{< /member-description >}} ### selectable$ {{< member-info kind="property" type="Observable<boolean>" >}} {{< member-description >}}{{< /member-description >}} ### constructor {{< member-info kind="method" type="(configurableInputComponent: ConfigurableInputComponent) => CombinationModeFormInputComponent" >}} {{< member-description >}}{{< /member-description >}} ### ngOnInit {{< member-info kind="method" type="() => " >}} {{< member-description >}}{{< /member-description >}} ### setCombinationModeAnd {{< member-info kind="method" type="() => " >}} {{< member-description >}}{{< /member-description >}} ### setCombinationModeOr {{< member-info kind="method" type="() => " >}} {{< member-description >}}{{< /member-description >}}
# CurrencyFormInputComponent {{< generation-info sourceFile="packages/admin-ui/src/lib/core/src/shared/dynamic-form-inputs/currency-form-input/currency-form-input.component.ts" sourceLine="17" packageName="@vendure/admin-ui">}} An input for monetary values. Should be used with `int` type fields. ## Signature ```TypeScript class CurrencyFormInputComponent implements FormInputComponent { static readonly static readonly id: DefaultFormComponentId = 'currency-form-input'; @Input() @Input() readonly: boolean; formControl: UntypedFormControl; currencyCode$: Observable; config: DefaultFormComponentConfig<'currency-form-input'>; constructor(dataService: DataService) } ``` ## Implements * FormInputComponent ## Members ### id {{< member-info kind="property" type="DefaultFormComponentId" >}} {{< member-description >}}{{< /member-description >}} ### readonly {{< member-info kind="property" type="boolean" >}} {{< member-description >}}{{< /member-description >}} ### formControl {{< member-info kind="property" type="UntypedFormControl" >}} {{< member-description >}}{{< /member-description >}} ### currencyCode$ {{< member-info kind="property" type="Observable<CurrencyCode>" >}} {{< member-description >}}{{< /member-description >}} ### config {{< member-info kind="property" type="DefaultFormComponentConfig<'currency-form-input'>" >}} {{< member-description >}}{{< /member-description >}} ### constructor {{< member-info kind="method" type="(dataService: DataService) => CurrencyFormInputComponent" >}} {{< member-description >}}{{< /member-description >}}
# CustomerGroupFormInputComponent {{< generation-info sourceFile="packages/admin-ui/src/lib/core/src/shared/dynamic-form-inputs/customer-group-form-input/customer-group-form-input.component.ts" sourceLine="20" packageName="@vendure/admin-ui">}} Allows the selection of a Customer via an autocomplete select input. Should be used with `ID` type fields which represent Customer IDs. ## Signature ```TypeScript class CustomerGroupFormInputComponent implements FormInputComponent, OnInit { static readonly static readonly id: DefaultFormComponentId = 'customer-group-form-input'; @Input() @Input() readonly: boolean; formControl: UntypedFormControl; customerGroups$: Observable; config: DefaultFormComponentConfig<'customer-group-form-input'>; constructor(dataService: DataService) ngOnInit() => ; selectGroup(group: ItemOf) => ; } ``` ## Implements * FormInputComponent * OnInit ## Members ### id {{< member-info kind="property" type="DefaultFormComponentId" >}} {{< member-description >}}{{< /member-description >}} ### readonly {{< member-info kind="property" type="boolean" >}} {{< member-description >}}{{< /member-description >}} ### formControl {{< member-info kind="property" type="UntypedFormControl" >}} {{< member-description >}}{{< /member-description >}} ### customerGroups$ {{< member-info kind="property" type="Observable<GetCustomerGroupsQuery['customerGroups']['items']>" >}} {{< member-description >}}{{< /member-description >}} ### config {{< member-info kind="property" type="DefaultFormComponentConfig<'customer-group-form-input'>" >}} {{< member-description >}}{{< /member-description >}} ### constructor {{< member-info kind="method" type="(dataService: DataService) => CustomerGroupFormInputComponent" >}} {{< member-description >}}{{< /member-description >}} ### ngOnInit {{< member-info kind="method" type="() => " >}} {{< member-description >}}{{< /member-description >}} ### selectGroup {{< member-info kind="method" type="(group: ItemOf<GetCustomerGroupsQuery, 'customerGroups'>) => " >}} {{< member-description >}}{{< /member-description >}}
# DateFormInputComponent {{< generation-info sourceFile="packages/admin-ui/src/lib/core/src/shared/dynamic-form-inputs/date-form-input/date-form-input.component.ts" sourceLine="14" packageName="@vendure/admin-ui">}} Allows selection of a datetime. Default input for `datetime` type fields. ## Signature ```TypeScript class DateFormInputComponent implements FormInputComponent { static readonly static readonly id: DefaultFormComponentId = 'date-form-input'; @Input() @Input() readonly: boolean; formControl: UntypedFormControl; config: DefaultFormComponentConfig<'date-form-input'>; min: void max: void yearRange: void } ``` ## Implements * FormInputComponent ## Members ### id {{< member-info kind="property" type="DefaultFormComponentId" >}} {{< member-description >}}{{< /member-description >}} ### readonly {{< member-info kind="property" type="boolean" >}} {{< member-description >}}{{< /member-description >}} ### formControl {{< member-info kind="property" type="UntypedFormControl" >}} {{< member-description >}}{{< /member-description >}} ### config {{< member-info kind="property" type="DefaultFormComponentConfig<'date-form-input'>" >}} {{< member-description >}}{{< /member-description >}} ### min {{< member-info kind="property" type="" >}} {{< member-description >}}{{< /member-description >}} ### max {{< member-info kind="property" type="" >}} {{< member-description >}}{{< /member-description >}} ### yearRange {{< member-info kind="property" type="" >}} {{< member-description >}}{{< /member-description >}}
# FacetValueFormInputComponent {{< generation-info sourceFile="packages/admin-ui/src/lib/core/src/shared/dynamic-form-inputs/facet-value-form-input/facet-value-form-input.component.ts" sourceLine="16" packageName="@vendure/admin-ui">}} Allows the selection of multiple FacetValues via an autocomplete select input. Should be used with `ID` type **list** fields which represent FacetValue IDs. ## Signature ```TypeScript class FacetValueFormInputComponent implements FormInputComponent { static readonly static readonly id: DefaultFormComponentId = 'facet-value-form-input'; readonly 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; } }; } ``` ## Implements * FormInputComponent ## Members ### id {{< member-info kind="property" type="DefaultFormComponentId" >}} {{< member-description >}}{{< /member-description >}} ### isListInput {{< member-info kind="property" type="" >}} {{< member-description >}}{{< /member-description >}} ### readonly {{< member-info kind="property" type="boolean" >}} {{< member-description >}}{{< /member-description >}} ### formControl {{< member-info kind="property" type="UntypedFormControl" >}} {{< member-description >}}{{< /member-description >}} ### config {{< member-info kind="property" type="InputComponentConfig" >}} {{< member-description >}}{{< /member-description >}} ### valueTransformFn {{< member-info kind="property" type="" >}} {{< member-description >}}{{< /member-description >}}
# NumberFormInputComponent {{< generation-info sourceFile="packages/admin-ui/src/lib/core/src/shared/dynamic-form-inputs/number-form-input/number-form-input.component.ts" sourceLine="14" packageName="@vendure/admin-ui">}} Displays a number input. Default input for `int` and `float` type fields. ## Signature ```TypeScript class NumberFormInputComponent implements FormInputComponent { static readonly static readonly id: DefaultFormComponentId = 'number-form-input'; @Input() @Input() readonly: boolean; formControl: UntypedFormControl; config: DefaultFormComponentConfig<'number-form-input'>; prefix: void suffix: void min: void max: void step: void } ``` ## Implements * FormInputComponent ## Members ### id {{< member-info kind="property" type="DefaultFormComponentId" >}} {{< member-description >}}{{< /member-description >}} ### readonly {{< member-info kind="property" type="boolean" >}} {{< member-description >}}{{< /member-description >}} ### formControl {{< member-info kind="property" type="UntypedFormControl" >}} {{< member-description >}}{{< /member-description >}} ### config {{< member-info kind="property" type="DefaultFormComponentConfig<'number-form-input'>" >}} {{< member-description >}}{{< /member-description >}} ### prefix {{< member-info kind="property" type="" >}} {{< member-description >}}{{< /member-description >}} ### suffix {{< member-info kind="property" type="" >}} {{< member-description >}}{{< /member-description >}} ### min {{< member-info kind="property" type="" >}} {{< member-description >}}{{< /member-description >}} ### max {{< member-info kind="property" type="" >}} {{< member-description >}}{{< /member-description >}} ### step {{< member-info kind="property" type="" >}} {{< member-description >}}{{< /member-description >}}
# PasswordFormInputComponent {{< generation-info sourceFile="packages/admin-ui/src/lib/core/src/shared/dynamic-form-inputs/password-form-input/password-form-input.component.ts" sourceLine="14" packageName="@vendure/admin-ui">}} Displays a password text input. Should be used with `string` type fields. ## Signature ```TypeScript class PasswordFormInputComponent implements FormInputComponent { static readonly static readonly id: DefaultFormComponentId = 'password-form-input'; readonly: boolean; formControl: UntypedFormControl; config: InputComponentConfig; } ``` ## Implements * FormInputComponent ## Members ### id {{< member-info kind="property" type="DefaultFormComponentId" >}} {{< member-description >}}{{< /member-description >}} ### readonly {{< member-info kind="property" type="boolean" >}} {{< member-description >}}{{< /member-description >}} ### formControl {{< member-info kind="property" type="UntypedFormControl" >}} {{< member-description >}}{{< /member-description >}} ### config {{< member-info kind="property" type="InputComponentConfig" >}} {{< member-description >}}{{< /member-description >}}
# ProductSelectorFormInputComponent {{< generation-info sourceFile="packages/admin-ui/src/lib/core/src/shared/dynamic-form-inputs/product-selector-form-input/product-selector-form-input.component.ts" sourceLine="20" packageName="@vendure/admin-ui">}} Allows the selection of multiple ProductVariants via an autocomplete select input. Should be used with `ID` type **list** fields which represent ProductVariant IDs. ## Signature ```TypeScript class ProductSelectorFormInputComponent implements FormInputComponent, OnInit { static readonly static readonly id: DefaultFormComponentId = 'product-selector-form-input'; readonly readonly isListInput = true; readonly: boolean; formControl: UntypedFormControl; config: InputComponentConfig; selection$: Observable>; constructor(dataService: DataService) ngOnInit() => ; addProductVariant(product: ProductSelectorSearchQuery['search']['items'][number]) => ; removeProductVariant(id: string) => ; } ``` ## Implements * FormInputComponent * OnInit ## Members ### id {{< member-info kind="property" type="DefaultFormComponentId" >}} {{< member-description >}}{{< /member-description >}} ### isListInput {{< member-info kind="property" type="" >}} {{< member-description >}}{{< /member-description >}} ### readonly {{< member-info kind="property" type="boolean" >}} {{< member-description >}}{{< /member-description >}} ### formControl {{< member-info kind="property" type="UntypedFormControl" >}} {{< member-description >}}{{< /member-description >}} ### config {{< member-info kind="property" type="InputComponentConfig" >}} {{< member-description >}}{{< /member-description >}} ### selection$ {{< member-info kind="property" type="Observable<Array<GetProductVariantQuery['productVariant']>>" >}} {{< member-description >}}{{< /member-description >}} ### constructor {{< member-info kind="method" type="(dataService: DataService) => ProductSelectorFormInputComponent" >}} {{< member-description >}}{{< /member-description >}} ### ngOnInit {{< member-info kind="method" type="() => " >}} {{< member-description >}}{{< /member-description >}} ### addProductVariant {{< member-info kind="method" type="(product: ProductSelectorSearchQuery['search']['items'][number]) => " >}} {{< member-description >}}{{< /member-description >}} ### removeProductVariant {{< member-info kind="method" type="(id: string) => " >}} {{< member-description >}}{{< /member-description >}}
# RelationFormInputComponent {{< generation-info sourceFile="packages/admin-ui/src/lib/core/src/shared/dynamic-form-inputs/relation-form-input/relation-form-input.component.ts" sourceLine="17" packageName="@vendure/admin-ui">}} 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 ```TypeScript class RelationFormInputComponent implements FormInputComponent { static readonly static readonly id: DefaultFormComponentId = 'relation-form-input'; @Input() @Input() readonly: boolean; formControl: UntypedFormControl; config: RelationCustomFieldConfig; } ``` ## Implements * FormInputComponent ## Members ### id {{< member-info kind="property" type="DefaultFormComponentId" >}} {{< member-description >}}{{< /member-description >}} ### readonly {{< member-info kind="property" type="boolean" >}} {{< member-description >}}{{< /member-description >}} ### formControl {{< member-info kind="property" type="UntypedFormControl" >}} {{< member-description >}}{{< /member-description >}} ### config {{< member-info kind="property" type="RelationCustomFieldConfig" >}} {{< member-description >}}{{< /member-description >}}
# RichTextFormInputComponent {{< generation-info sourceFile="packages/admin-ui/src/lib/core/src/shared/dynamic-form-inputs/rich-text-form-input/rich-text-form-input.component.ts" sourceLine="14" packageName="@vendure/admin-ui">}} Uses the RichTextEditorComponent as in input for `text` type fields. ## Signature ```TypeScript class RichTextFormInputComponent implements FormInputComponent { static readonly static readonly id: DefaultFormComponentId = 'rich-text-form-input'; readonly: boolean; formControl: UntypedFormControl; config: DefaultFormComponentConfig<'rich-text-form-input'>; } ``` ## Implements * FormInputComponent ## Members ### id {{< member-info kind="property" type="DefaultFormComponentId" >}} {{< member-description >}}{{< /member-description >}} ### readonly {{< member-info kind="property" type="boolean" >}} {{< member-description >}}{{< /member-description >}} ### formControl {{< member-info kind="property" type="UntypedFormControl" >}} {{< member-description >}}{{< /member-description >}} ### config {{< member-info kind="property" type="DefaultFormComponentConfig<'rich-text-form-input'>" >}} {{< member-description >}}{{< /member-description >}}
# SelectFormInputComponent {{< generation-info sourceFile="packages/admin-ui/src/lib/core/src/shared/dynamic-form-inputs/select-form-input/select-form-input.component.ts" sourceLine="18" packageName="@vendure/admin-ui">}} Uses a select input to allow the selection of a string value. Should be used with `string` type fields with options. ## Signature ```TypeScript class SelectFormInputComponent implements FormInputComponent, OnInit { static readonly static readonly id: DefaultFormComponentId = 'select-form-input'; @Input() @Input() readonly: boolean; formControl: UntypedFormControl; config: DefaultFormComponentConfig<'select-form-input'> & CustomFieldConfigFragment; uiLanguage$: Observable; options: void constructor(dataService: DataService) ngOnInit() => ; trackByFn(index: number, item: any) => ; } ``` ## Implements * FormInputComponent * OnInit ## Members ### id {{< member-info kind="property" type="DefaultFormComponentId" >}} {{< member-description >}}{{< /member-description >}} ### readonly {{< member-info kind="property" type="boolean" >}} {{< member-description >}}{{< /member-description >}} ### formControl {{< member-info kind="property" type="UntypedFormControl" >}} {{< member-description >}}{{< /member-description >}} ### config {{< member-info kind="property" type="DefaultFormComponentConfig<'select-form-input'> & CustomFieldConfigFragment" >}} {{< member-description >}}{{< /member-description >}} ### uiLanguage$ {{< member-info kind="property" type="Observable<LanguageCode>" >}} {{< member-description >}}{{< /member-description >}} ### options {{< member-info kind="property" type="" >}} {{< member-description >}}{{< /member-description >}} ### constructor {{< member-info kind="method" type="(dataService: DataService) => SelectFormInputComponent" >}} {{< member-description >}}{{< /member-description >}} ### ngOnInit {{< member-info kind="method" type="() => " >}} {{< member-description >}}{{< /member-description >}} ### trackByFn {{< member-info kind="method" type="(index: number, item: any) => " >}} {{< member-description >}}{{< /member-description >}}
# TextFormInputComponent {{< generation-info sourceFile="packages/admin-ui/src/lib/core/src/shared/dynamic-form-inputs/text-form-input/text-form-input.component.ts" sourceLine="14" packageName="@vendure/admin-ui">}} Uses a regular text form input. This is the default input for `string` and `localeString` type fields. ## Signature ```TypeScript class TextFormInputComponent implements FormInputComponent { static readonly static readonly id: DefaultFormComponentId = 'text-form-input'; readonly: boolean; formControl: UntypedFormControl; config: DefaultFormComponentConfig<'text-form-input'>; prefix: void suffix: void } ``` ## Implements * FormInputComponent ## Members ### id {{< member-info kind="property" type="DefaultFormComponentId" >}} {{< member-description >}}{{< /member-description >}} ### readonly {{< member-info kind="property" type="boolean" >}} {{< member-description >}}{{< /member-description >}} ### formControl {{< member-info kind="property" type="UntypedFormControl" >}} {{< member-description >}}{{< /member-description >}} ### config {{< member-info kind="property" type="DefaultFormComponentConfig<'text-form-input'>" >}} {{< member-description >}}{{< /member-description >}} ### prefix {{< member-info kind="property" type="" >}} {{< member-description >}}{{< /member-description >}} ### suffix {{< member-info kind="property" type="" >}} {{< member-description >}}{{< /member-description >}}
# TextareaFormInputComponent {{< generation-info sourceFile="packages/admin-ui/src/lib/core/src/shared/dynamic-form-inputs/textarea-form-input/textarea-form-input.component.ts" sourceLine="14" packageName="@vendure/admin-ui">}} Uses textarea form input. This is the default input for `text` type fields. ## Signature ```TypeScript class TextareaFormInputComponent implements FormInputComponent { static readonly static readonly id: DefaultFormComponentId = 'textarea-form-input'; readonly: boolean; formControl: UntypedFormControl; config: DefaultFormComponentConfig<'textarea-form-input'>; spellcheck: boolean } ``` ## Implements * FormInputComponent ## Members ### id {{< member-info kind="property" type="DefaultFormComponentId" >}} {{< member-description >}}{{< /member-description >}} ### readonly {{< member-info kind="property" type="boolean" >}} {{< member-description >}}{{< /member-description >}} ### formControl {{< member-info kind="property" type="UntypedFormControl" >}} {{< member-description >}}{{< /member-description >}} ### config {{< member-info kind="property" type="DefaultFormComponentConfig<'textarea-form-input'>" >}} {{< member-description >}}{{< /member-description >}} ### spellcheck {{< member-info kind="property" type="boolean" >}} {{< member-description >}}{{< /member-description >}}