Form builder

Input — inputFields

<base-input>

All seventeen BaseInputFieldType values. Only TextArea and DatePicker get their own template — every other value is passed straight through as the DOM type attribute.

Text (default)

Password

Url

Number

Currency

Tel

Fax

Date (native)

Datetime-local

Time

Month

Week

DatePicker (Material)

Color

TextArea

Select — selectFields

<base-select>

Single select and a multiple select. Options are SelectOption[] with label and value.

Department

Statuses

Radio — radioFields

<base-radio>

signalControl sits on the field; each radioButton only supplies a label and value.

Preferred contact method

Phone

Mail

Checkbox — checkboxFields

<base-checkbox>

Checkbox is the one input that binds per option: a single checkbox uses labelCheckbox with the field control, but a group needs signalControl on every checkboxButton.

Send me weekly updates

Alerts

When an award is made

When a deadline approaches

Slide toggle — sliderToggleFields

<base-toggle-slider>

A plain slide toggle and one with opposingLabel, which bolds whichever side is active.

Account active

All

Mine

Slider — sliderFields

<base-slider>

A range slider with min, max and step, bound the same way as the other inputs.

Percent effort

Chip — chipFields

<base-chip>

chipRows drive the visible chips; removeClick handles dismissal. The rows here live in their own signal rather than the form model.

Topics

Oceanography

Climate

Remote Sensing

List — listFields

<base-list>

base-list inside a form row — useful for read-only summaries next to editable controls.

12 March 2026

28 March 2026

Budget attached
IRB approval on file
Awaiting signature

Search — searchField

<base-search>

Binds a plain WritableSignal through signalControl. Five variants: submit-only, autoSearch, a custom button, the button moved outside, and autocomplete.

Default — onSearch on Enter or the icon

autoSearch: true — fires per keystroke

searchButton — custom icon, inside the input

searchOutside: true — button rendered after the input

autoCompleteFetchFn — 3 chars minimum, 400ms debounce

Avatar — avatarFields

<user-avatar>

user-avatar in a form row. With no user it falls back to a placeholder icon.

Pass a FacultyUserDto as user, or imageSrc for a direct URL.

Title / Text — titleField, textField and titleTextField

<base-title> <base-text> <title-text>

Display-only cells, handy for captions and spacers inside a form grid.

A title cell

A text cell for helper copy.

Title + text

Both in one field.

Row header — formRowHeader and formRowHeaderButton

<section-header>

Row headers render through section-header, with an optional button on the right.

Section heading

formRowSubHeader sits underneath as description text.

A field under the heading

Button — buttonFields

<base-button>

Every MatButtonType, a row showing extraText and extraNumber, then a right-aligned action row where flex utilities on formRowClass override the 12-column grid.

Alert — alertField

<alert-message>

A notice inside the form (one AlertData or a list), e.g. a warning above the fields it concerns or a send error under them.

Changing the sponsor resets the budget categories below.

Sponsor

Spam protection — honeypotField and turnstileField

withSpamGuard(rows, spamGuard) adds both to a public form: the off-screen honeypot in the last row (it takes no grid cell) and Cloudflare Turnstile in a row of its own, empty until Cloudflare wants a ...

Your name

File upload — fileUploadField

<base-file-upload-selector>

The dropzone renders inline as well as in a dialog — its MatDialogRef is injected optional. hideFooterButtons drops the save/cancel row that assumes a dialog host.

FileSelector.SelectFileOrDnD

or browse from your computer

No attachments yet

Rich text — quillEditorField

<app-quill-editor>

ngx-quill with the shared toolbar. allowSourceView adds an HTML toggle, and mergeFieldsData can supply draggable tokens.

Bigger form with expand and collapse

[$formAccordion]="true" wraps each row in an expansion panel using formRowHeader as its title. [$isExpanded] opens or closes them together, and [$headerExpandable] controls whether the panel headers r...

Applicant

Who is submitting, and how to reach them.

First name

Last name

Phone

Department

Award

Money, dates and effort.

Award amount

Start date

Statuses

Percent effort

Notifications

Everything optional lives here.

Send me weekly updates

Alerts

When an award is made

When a deadline approaches

Internal notes

Every control on this page writes into one signal form.

Live model:

{
  "firstName": "",
  "lastName": "",
  "email": "",
  "phone": "",
  "awardAmount": null,
  "departmentId": null,
  "statusIds": [],
  "startDate": null,
  "notes": "",
  "contactMethod": "email",
  "sendUpdates": true,
  "alertOnAward": true,
  "alertOnDeadline": false,
  "active": true,
  "effort": 40,
  "colorValue": "#0f766e",
  "dateValue": "",
  "datetimeValue": "",
  "monthValue": "",
  "weekValue": "",
  "timeValue": "",
  "numberValue": null,
  "passwordValue": "",
  "searchValue": "",
  "faxValue": "",
  "urlValue": ""
}