Custom Form Inputs

You can define custom Angular or React components which can be used to render Custom Fields you have defined on your entities as well as configurable args used by custom Configurable Operations.

For Custom Fields

Let's say you define a custom "intensity" field on the Product entity:

src/vendure-config.ts

import { VendureConfig } from '@vendure/core';export const config: VendureConfig = {    // ...    customFields: {        Product: [            { name: 'intensity', type: 'int', min: 0, max: 100, defaultValue: 0 },        ],    },}

By default, the "intensity" field will be displayed as a number input:

But let's say we want to display a range slider instead.

1. Define a component

First we need to define a new Angular or React component to render the slider:

Angular components will have the readonly, config and formControl properties populated automatically.

src/plugins/common/ui/components/slider-form-input/slider-form-input.component.ts

import { Component } from '@angular/core';import { FormControl } from '@angular/forms';import { IntCustomFieldConfig, SharedModule, FormInputComponent } from '@vendure/admin-ui/core';@Component({    template: `      <input          type="range"          [min]="config.min || 0"          [max]="config.max || 100"          [formControl]="formControl" />      {{ formControl.value }}  `,    standalone: true,    imports: [SharedModule],})export class SliderControlComponent implements FormInputComponent<IntCustomFieldConfig> {    readonly: boolean;    config: IntCustomFieldConfig;    formControl: FormControl;}

import { Component, OnInit } from '@angular/core';import { FormControl } from '@angular/forms';import { ActivatedRoute } from '@angular/router';import { RelationCustomFieldConfig } from '@vendure/common/lib/generated-types';import { FormInputComponent, DataService, SharedModule } from '@vendure/admin-ui/core';import { Observable } from 'rxjs';import { switchMap } from 'rxjs/operators';import { GET_REVIEWS_FOR_PRODUCT } from '../product-reviews-list/product-reviews-list.graphql';@Component({ selector: 'relation-review-input', template: ` <div *ngIf="formControl.value as review"> <vdr-chip>{{ review.rating }} / 5</vdr-chip> {{ review.summary }} <a [routerLink]="['/extensions', 'product-reviews', review.id]"> <clr-icon shape="link"></clr-icon> </a> </div> <select [formControl]="formControl" [compareWith]="compareFn"> <option [ngValue]="null">Select a review...</option> <option *ngFor="let item of reviews$ | async" [ngValue]="item"> <b>{{ item.summary }}</b> {{ item.rating }} / 5 </option> </select> `, standalone: true, imports: [SharedModule],})export class RelationReviewInputComponent implements OnInit, FormInputComponent<RelationCustomFieldConfig> { readonly: boolean; formControl: FormControl; config: RelationCustomFieldConfig; reviews$: Observable<any[]>; constructor(private dataService: DataService, private route: ActivatedRoute) {} ngOnInit() { this.reviews$ = this.route.data.pipe( switchMap(data => data.entity), switchMap((product: any) => { return this.dataService .query(GET_REVIEWS_FOR_PRODUCT, { productId: product.id }) .mapSingle(({ product }) => product?.reviews.items ?? []); }), ); } compareFn(item1: { id: string } | null, item2: { id: string } | null) { return item1 && item2 ? item1.id === item2.id : item1 === item2; }}

Custom Form Inputs

For Custom Fields

1. Define a component

Custom Form Inputs

For Custom Fields

1. Define a component

2. Register the component

3. Register the providers

4. Update the custom field config

Custom Field Controls for Relations

For ConfigArgs