@kit-ng-ui/form

Form layout primitives — <kit-form> and <kit-form-item> — for label/error layout, required marks, and validation feedback. Pairs with @kit-ng-ui/input, @kit-ng-ui/select, @kit-ng-ui/checkbox, @kit-ng-ui/radio, @kit-ng-ui/switch, and @kit-ng-ui/input-number.

Install

pnpm add @kit-ng-ui/form @kit-ng-ui/core @angular/forms

Styles

@use '@kit-ng-ui/core/styles' as *;
@use '@kit-ng-ui/form/styles' as form;

Use

import { Component } from '@angular/core';
import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
import { KitFormComponent, KitFormItemComponent } from '@kit-ng-ui/form';
import { KitInputComponent } from '@kit-ng-ui/input';
import { KitButtonComponent } from '@kit-ng-ui/button';

@Component({
  standalone: true,
  imports: [
    KitFormComponent, KitFormItemComponent,
    KitInputComponent, KitButtonComponent,
    ReactiveFormsModule,
  ],
  template: `
    <kit-form layout="vertical" [formGroup]="form" (ngSubmit)="submit()">
      <kit-form-item label="Email" [required]="true" [control]="form.controls.email">
        <kit-input type="email" formControlName="email" placeholder="[email protected]" />
      </kit-form-item>

      <kit-form-item label="Password" [required]="true" [control]="form.controls.password">
        <kit-input type="password" formControlName="password" />
      </kit-form-item>

      <kit-button type="primary" htmlType="submit" [disabled]="form.invalid">Sign in</kit-button>
    </kit-form>
  `,
})
export class LoginForm {
  private fb = inject(FormBuilder);
  form = this.fb.group({
    email: ['', [Validators.required, Validators.email]],
    password: ['', [Validators.required, Validators.minLength(8)]],
  });

  submit() { /* … */ }
}

API

<kit-form> (also matches form[kitForm])

| Input | Type | Default | | -------------- | ------------------------------------------------- | --------------- | | layout | 'horizontal' \| 'vertical' \| 'inline' | 'horizontal' | | size | 'sm' \| 'md' \| 'lg' | 'md' | | labelAlign | 'left' \| 'right' | 'right' | | colon | boolean | true | | requiredMark | 'required' \| 'optional' \| false | 'required' | | disabled | boolean | false | | labelWidth | string \| null — CSS width applied to each label | null |

<kit-form-item>

| Input | Type | Default | | ---------------- | --------------------------------------------------------------- | ------- | | label | string \| null | null | | labelFor | string \| null — applied to the <label for> | null | | required | boolean | false | | help | string \| null — info text below the control | null | | extra | string \| null — secondary helper below help/error | null | | errorTip | string \| null — message override when invalid | null | | hasFeedback | boolean — reserve space for status icons | false | | control | AbstractControl \| null — drives auto error display | null | | validateStatus | 'success' \| 'warning' \| 'error' \| 'validating' \| null | null | | noStyle | boolean — strip label / error chrome | false |

Behavior notes

• Pass [control]="form.controls.x" to enable auto validation feedback. The item watches invalid && (touched || dirty) and shows [errorTip] or a fallback string derived from the first error key (required, email, minlength, …).
• For custom messages, supply [errorTip] or set [validateStatus]="'error'" + [help] manually.
• [noStyle] is for nesting (e.g., a control inside another item) — strips label + error chrome while keeping the structural wrapper.
• <kit-form> only sets layout state; reactive forms still come from @angular/forms (use [formGroup] directly on the host).