@baloise/web-app-validators-angular v3.11.4

@baloise/web-app-validators-angular

Installation

npm install @baloise/web-app-validators-angular

Usage

The form elements support Angular Reactive Forms. Below is a basic example to use the reactive form together with the Design Stystem.

<form [formGroup]="form" (ngSubmit)="onSubmit()" class="columns is-multiline mt-0">
  <bal-field class="column is-full py-0" expanded required [disabled]="form.get('email')?.disabled">
    <bal-field-label required>Email</bal-field-label>
    <bal-field-control>
      <bal-input name="email" placeholder="Enter your email" formControlName="email"></bal-input>
    </bal-field-control>
    <bal-field-message color="danger">
      <bal-ng-error controlName="email" error="isRequired">This field is required</bal-ng-error>
      <bal-ng-error controlName="email" error="isMinLength">Min length is 4</bal-ng-error>
      <bal-ng-error controlName="email" error="isEmail">Not a valid email</bal-ng-error>
    </bal-field-message>
  </bal-field>
  <bal-field class="column is-half py-0" expanded>...</bal-field>
</form>

In the component class wen can define the validators for the form control.

import { Component } from '@angular/core'
import { FormControl, FormGroup } from '@angular/forms'
import { BalValidators } from '@baloise/design-system-components-angular'

@Component({
  selector: 'app-form-page',
  templateUrl: './form-page.component.html',
})
export class FormPageComponent {
  form = new FormGroup({
    email: new FormControl(null, [BalValidators.isRequired(), BalValidators.isMinLength(4), BalValidators.isEmail()]),
  })

  onSubmit() {
    alert('Form is submitted!')
  }
}