Skip to main content

form fields

Input binding​

Bind input with FormControl:

<glint-text-field [control]="formControl"/>

Bind input with 2-way binding:

<glint-text-field [(value)]="model.myField"/>

In combination with [glintFormContainer] to auto-register the form-field:

<glint-text-field [(value)]="model.myField" formName="myField"/>

Form Container​

Glint provides a form container directive to automatically build a FormGroup instance for a form. This setup allows the updates to the model to be delayed until the form is submitted.

<form glintFormContainer [glintFormSubmit]="autoSubmit">
  <glint-text-field label="name" [(value)]="model.name" formName="name"/>
  <glint-text-field label="type" [(value)]="model.type" formName="type"/>
  <glint-text-field label="description" [(value)]="model.description" formName="description"/>
</form>
  • [glintFormContainer]: Adds form-container context so that form-fields can be auto-registered. A FormGroup can be passed as value. Otherwise, a new one will be created.
  • [glintFormSubmit]: Pass an Observable. The form will trigger a submit each time the observable triggers.
  • [formName]: Name of the form field in the FormGroup. The field will only be registered if this value is defined.

Components​

These fields are present on all glint form field components.

  • label: (required) Field label describing the field being edited.
  • description: (optional) Longer description that will appear below the field.

glint-text-field​

Simple text field.

<glint-text-field label="name" description="Some description"/>

glint-text-area-field​

Large text field for multiline strings.

<glint-text-area-field label="name" description="Some description"/>

glint-checkbox-field​

Checkbox field for boolean values.

<glint-checkbox-field label="isInfo" description="Some description"/>

glint-number-field​

Input field for number values.

<glint-number-field label="amount" description="Some description"/>