Utilities

Form Validation

After a failed save every field shows its error, the first invalid one scrolls into view and gets the focus — the input inside a kit field, not its wrapper.

Part of @tectra-ng/utils (npm install @tectra-ng/utils, also included in tectra-ng).

Features3

API

Theming

Basic

Press Save with empty fields: the form scrolls to the first error and focuses it. TxFormValidation provided in the component searches only inside it.

18 lines

<form class="form" [formGroup]="form">  <tx-field label="Title" [control]="form.controls.title">    <input txInput formControlName="title" [fluid]="true" />  </tx-field>  <tx-field label="Description" [control]="form.controls.description">    <textarea txTextarea rows="4" formControlName="description" [fluid]="true"></textarea>  </tx-field>  <tx-field label="Priority" [control]="form.controls.priority">    <tx-select formControlName="priority" placeholder="Choose" [options]="priorities" />  </tx-field>  <tx-field label="Due date" [control]="form.controls.due">    <tx-datepicker formControlName="due" [showIcon]="true" [fluid]="true" />  </tx-field>  <div class="flex">    <button txButton type="button" label="Save" (click)="save()"></button>    <span class="hint">{{ status() }}</span>  </div></form>

On submit

txScrollToInvalid on a <form> does the same on submit and reports validSubmit only when the form is valid.

18 lines

<form  class="form"  [formGroup]="form"  txScrollToInvalid  (validSubmit)="status.set('Invite sent to ' + form.value.email)"  (invalidSubmit)="status.set('Check the form.')">  <tx-field label="Email" [control]="form.controls.email">    <input txInput type="email" formControlName="email" [fluid]="true" />  </tx-field>  <tx-field label="Teams" [control]="form.controls.teams">    <tx-multiselect formControlName="teams" placeholder="Pick teams" [options]="teams" />  </tx-field>  <div class="flex">    <button txButton type="submit" label="Send invite"></button>    <span class="hint">{{ status() }}</span>  </div></form>

Nested

Groups and arrays too: markAllTouched walks every level, and the scroll goes to the first invalid row.

Item 1

Quantity

Item 2

Quantity

Item 3

Quantity

22 lines

<div class="form" [formGroup]="form">  @for (row of form.controls.items.controls; track row; let index = $index) {    <div class="row" [formGroup]="row">      <tx-field [label]="'Item ' + (index + 1)" [control]="row.controls.name">        <input txInput formControlName="name" [fluid]="true" />      </tx-field>      <tx-field label="Quantity" [control]="row.controls.quantity">        <tx-input-number formControlName="quantity" [min]="0" [fluid]="true" />      </tx-field>    </div>  }  <div class="flex">    <button      txButton      type="button"      label="Add item"      severity="secondary"      (click)="form.controls.items.push(item())"    ></button>    <button txButton type="button" label="Check" (click)="check()"></button>  </div></div>