Special inputs

As listed in our features, the library supports all native HTML form fields. This includes the HTML <select /> element as well as special cases of the <input /> element.

In our playground you can take a look at such fields and test them out.

The [formischControl] directive knows how to read from and write to each of these element types, so in every example below you only bind the directive — never [value], [checked] or [selected].

Checkbox

A simple checkbox represents a boolean and is true when checked or false otherwise.

<label *formischField="['cookies'] of form; let field">
  <input [formischControl]="field" type="checkbox" />
  Yes, I want cookies
</label>

However, you can also use multiple checkboxes to represent an array of strings. For this you simply have to add the value attribute to each HTML <input /> element. All checkboxes of the group are bound to the same field.

<ng-container *formischField="['fruits'] of form; let field">
  @for (fruit of fruits; track fruit.value) {
    <label>
      <input [formischControl]="field" type="checkbox" [value]="fruit.value" />
      {{ fruit.label }}
    </label>
  }
</ng-container>

protected readonly fruits = [
  { label: 'Bananas', value: 'bananas' },
  { label: 'Apples', value: 'apples' },
  { label: 'Grapes', value: 'grapes' },
];

The value attribute is the one binding you do set yourself, since it identifies the option rather than holding the field's state.

Radio

A group of radio buttons, while similar to an array of checkboxes, will only allow you to select one of the options based on which button is checked.

<ng-container *formischField="['color'] of form; let field">
  @for (color of colors; track color.value) {
    <label>
      <input [formischControl]="field" type="radio" [value]="color.value" />
      {{ color.label }}
    </label>
  }
</ng-container>

protected readonly colors = [
  { label: 'Red', value: 'red' },
  { label: 'Green', value: 'green' },
  { label: 'Blue', value: 'blue' },
];

Select

An HTML <select /> element allows you to select a string from a predefined list of options.

<select
  *formischField="['framework'] of form; let field"
  [formischControl]="field"
>
  @for (option of options; track option.value) {
    <option [value]="option.value">{{ option.label }}</option>
  }
</select>

However, if you set the multiple attribute, multiple options can be selected making the field represent an array of strings.

<select
  *formischField="['frameworks'] of form; let field"
  [formischControl]="field"
  multiple
>
  @for (option of options; track option.value) {
    <option [value]="option.value">{{ option.label }}</option>
  }
</select>

A <select /> silently ignores a value for which no matching <option /> exists yet. This happens when the options are rendered asynchronously, for example after a resource or an HTTP request resolves. Formisch handles this for you: the directive observes the option elements and re-applies the field input as soon as a matching option appears, so a value set via initialInput or setInput is not lost.

Placeholder option

To show a placeholder while the field is empty, add a disabled option with an empty value. Because the directive writes an empty string for a nullish input, the browser selects that option instead of falling back to the first real one.

<select
  *formischField="['framework'] of form; let field"
  [formischControl]="field"
>
  <option value="" disabled hidden>Select a framework</option>
  @for (option of options; track option.value) {
    <option [value]="option.value">{{ option.label }}</option>
  }
</select>

File

For the HTML <input type="file" /> element it works similar to the HTML <select /> element. Without the multiple attribute it represents a single file and with, a list of files.

<input
  *formischField="['avatar'] of form; let field"
  [formischControl]="field"
  type="file"
  accept="image/*"
/>

With the multiple attribute, users can select multiple files:

<input
  *formischField="['documents'] of form; let field"
  [formischControl]="field"
  type="file"
  multiple
/>

Browsers do not allow a file selection to be set programmatically, so a file input is the one element Formisch cannot write into. It can only clear it: when the field input becomes empty — for example through reset — the directive resets the element as well.