form-input-component.md 2.0 KB
title: "FormInputComponent" weight: 10 date: 2023-06-08T15:03:34.584Z showtoc: true
generated: true
FormInputComponent
# FormInputComponent
{{< generation-info sourceFile="packages/admin-ui/src/lib/core/src/common/component-registry-types.ts" sourceLine="10" packageName="@vendure/admin-ui">}}
This interface should be implemented by any component being used as a custom input. For example,
inputs for custom fields, or for configurable arguments.
## Signature
```TypeScript
interface FormInputComponent {
isListInput?: boolean;
readonly: boolean;
formControl: UntypedFormControl;
config: C;
}
```
## Members
### isListInput
{{< member-info kind="property" type="boolean" >}}
{{< member-description >}}Should be set to `true` if this component is designed to handle lists.
If `true` then the formControl value will be an array of all the
values in the list.{{< /member-description >}}
### readonly
{{< member-info kind="property" type="boolean" >}}
{{< member-description >}}This is set by the Admin UI when consuming this component, indicating that the
component should be rendered in a read-only state.{{< /member-description >}}
### formControl
{{< member-info kind="property" type="UntypedFormControl" >}}
{{< member-description >}}This controls the actual value of the form item. The current value is available
as `this.formControl.value`, and an Observable stream of value changes is available
as `this.formControl.valueChanges`. To update the value, use `.setValue(val)` and then
`.markAsDirty()`.
Full documentation can be found in the [Angular docs](https://angular.io/api/forms/FormControl).{{< /member-description >}}
### config
{{< member-info kind="property" type="C" >}}
{{< member-description >}}The `config` property contains the full configuration object of the custom field or configurable argument.{{< /member-description >}}