Web components

...

Boolean inputs

...

The available Web boolean inputs are:

• Boolean icon
• Checkbox
• Switch

Basics of boolean inputs

...

Boolean inputs validation

The validation of the inputs can be controlled using the invalid-text attribute. This text will only be shown if a label is provided:

The required property will make the boolean input invalid. The invalid state will disappear it the value is set to true:

Inputs

...

The available Web inputs are:

• Date input
• Multi input
• Multiselect
• Number input
• Password input
• Select
• Text input
• Textarea
• Time input

Basics of inputs

...

Help text

...

Inputs validation

The validation of the inputs can be controlled using the invalid flag. In combination with help-text, you can also provide some feedback about the error.

When the required flag is set, the invalid state will be shown when the input is touched.

The message shown is this cases would be Required field.

max-length

The Text input and Textarea components allow the use of max-length attribute.

Vue

Vue has the v-model directive to manage the two-way data binding. But this comes with the twist of having to use specific naming for the value attribute and the change event, set as modelValue and onUpdate:modelValue respectively.

Here's an example of use:

<script lang="ts" setup>
import { ref } from 'vue';
import { ZvCheckbox } from '@zurich/web-components/vue';


const value = ref(false)
</script>

<template>
  <code><b>Value:</b> {{ value }}<code>

  <zv-checkbox v-model="value"/>
</template>

Angular

ngModel

Angular has the [(ngModel)] directive to manage the two-way data binding. But this comes with the twist of having to use specific naming for the value attribute and the change event, that will be changed to ngModel and ngModelChange respectively.

You can use this naming without import FormsModule due to the standardization done in our Angular wrappers.

Here's an example of use:

import { Component } from '@angular/core';
import { ZaCheckbox } from '@zurich/angular-components';

@Component({
  standalone: true,
  imports: [ZaCheckbox],
  template: `
    <code><b>Value:</b> {{ value }}<code>

    <za-checkbox [(ngModel)]="value"/>
  `,
})
export class Checkbox {
  value = false;
}

Reactive Forms

The components of @zurich/angular-components are prepared to use Angular's Reactive Forms. The @angular/forms package is already part of the dependencies

app.component.ts

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { ZaButton, ZaCheckboxSelect } from '@zurich/angular-components';

@Component({
  standalone: true,
  imports: [CommonModule, ZaCheckboxSelect, ZaButton, ReactiveFormsModule],
  template: './app.component.html',
})
export class ReactiveForm {
  readonly fruitOptions: ZaCheckboxSelect['options'] = [
    { text: 'Banana', value: 'banana' },
    { text: 'Orange', value: 'orange' },
    { text: 'Kiwi', value: 'kiwi' },
  ];

  form = new FormGroup({
    fruit: new FormControl(['banana']),
  });

  setValue() { this.form.controls.fruit.setValue(['kiwi']); }

  resetValue() { this.form.controls.fruit.reset(); }
}

app.component.html

<form [formGroup]="form">
  <za-checkbox-select label="Fruits" formControlName="fruit" [options]="fruitOptions"/>
  
  <code><b>Value:</b> {{ form.get('fruit')?.value }}</code>

  <div>
    <za-button config="secondary:xs" (click)="setValue()">Set</za-button>
    <za-button config="negative:xs" (click)="resetValue()">Reset</za-button>
  </div>
</form>

Attention!

We strongly recommend the use of encapsulation of forms with all the inputs being controlled via ReactiveFormsModule in a single component. The combination of ReactiveFormsModule and the use of [(ngModel)] can lead to errors like:

ERROR Error NG0201: No provider for NgControl found in NodeInjector.

This can be bypassed by adding FormsModule to the imports and the using the ngDefaultControl attribute in the ZDS inputs that are using [(ngModel)]. But we recommend not to use this approach, but the form encapsulation.