Utilities

Validators

Form validators apps write again and again: codes, dates, links, passwords, IP addresses, domains, duplicates, prices. Every error has a translated message in the kit fields.

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

Features5

API

Theming

Account

strongPassword lists what is missing, matchFields puts the error on the confirmation field, numericCode checks a one-time code.

22 lines

<form class="form" [formGroup]="form">  <tx-field label="Password" [control]="form.controls.password" showImmediately>    <tx-password      formControlName="password"      autocomplete="new-password"      [toggleMask]="true"      [feedback]="false"      [fluid]="true"    />  </tx-field>  <tx-field label="Repeat the password" [control]="form.controls.confirm" showImmediately>    <tx-password      formControlName="confirm"      autocomplete="new-password"      [feedback]="false"      [fluid]="true"    />  </tx-field>  <tx-field label="Code from the email" [control]="form.controls.code" showImmediately>    <input txInput formControlName="code" inputmode="numeric" [fluid]="true" />  </tx-field></form>

Links and network

url with a host accepts only one service and its subdomains; ip takes a mask with cidr; domain knows Cyrillic and punycode names.

16 lines

<form class="form" [formGroup]="form">  <tx-field    label="Design file"    hint="A link on example.com"    [control]="form.controls.design"    showImmediately  >    <input txInput formControlName="design" [fluid]="true" />  </tx-field>  <tx-field label="Allowed network" [control]="form.controls.network" showImmediately>    <input txInput formControlName="network" [fluid]="true" />  </tx-field>  <tx-field label="Domain" [control]="form.controls.domain" showImmediately>    <input txInput formControlName="domain" [fluid]="true" />  </tx-field></form>

Lists

duplicate reads the taken names from a getter, so it follows the list; arraySumMax keeps the shares of a form array within 100%.

Design

Billing

Support

New tag

This value is already taken

Owner 1, %

Owner 2, %

Owner 3, %

The total must not exceed 100

33 lines

<div class="form">  <div class="flex">    @for (tag of tags(); track tag) {      <tx-chip [label]="tag" />    }  </div>  <tx-field label="New tag" [control]="tag" showImmediately>    <tx-input-group [fluid]="true">      <input txInput aria-label="New tag" [formControl]="tag" (keydown.enter)="add()" />      <button        txButton        label="Add"        [disabled]="tag.invalid || !tag.value.trim()"        (click)="add()"      ></button>    </tx-input-group>  </tx-field>  <div [formGroup]="owners">    <div class="shares">      @for (row of owners.controls.list.controls; track row; let index = $index) {        <tx-field [label]="'Owner ' + (index + 1) + ', %'">          <tx-input-number            [formControl]="row.controls.share"            [min]="0"            [max]="100"            [fluid]="true"          />        </tx-field>      }    </div>    <tx-field-error [control]="owners.controls.list" showImmediately />  </div></div>

Confirmation

exactValue asks to type a word before a destructive action; the button stays off until it matches.

Type DELETE to remove the project

17 lines

<div class="stack">  <tx-field label="Type DELETE to remove the project" [control]="confirm">    <input txInput [formControl]="confirm" autocomplete="off" [fluid]="true" />  </tx-field>  <div>    <button      txButton      label="Delete project"      severity="danger"      [disabled]="confirm.invalid"      (click)="deleted.set(true)"    ></button>  </div>  @if (deleted()) {    <span class="hint">Deleted (not really).</span>  }</div>

Formats

Smaller checks: a price with two decimals above zero, time as HH:mm, a JSON object, text without control characters or tags.

14 lines

<form class="form" [formGroup]="form">  <tx-field label="Price" [control]="form.controls.price" showImmediately>    <input txInput formControlName="price" inputmode="decimal" [fluid]="true" />  </tx-field>  <tx-field label="Send at" [control]="form.controls.time" showImmediately>    <input txInput formControlName="time" [fluid]="true" />  </tx-field>  <tx-field label="Headers (JSON)" [control]="form.controls.headers" showImmediately>    <textarea txTextarea rows="2" formControlName="headers" [fluid]="true"></textarea>  </tx-field>  <tx-field label="Display name" [control]="form.controls.name" showImmediately>    <input txInput formControlName="name" [fluid]="true" />  </tx-field></form>