Prism Docs

Form Integration

Demonstrating how all refactored core components integrate seamlessly with Angular Forms.

Comprehensive Integration

A complete form example showcasing signals, control value accessors, and the hybrid input strategy.

March 2026
SuMoTuWeThFrSa
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
  • Coding
  • Design
  • Music

Form State (Live)

REALTIME_STORE:
{
  "username": "",
  "email": "",
  "age": 25,
  "gender": "male",
  "interests": [
    "coding"
  ],
  "birthdate": "2026-03-25T18:20:27.419Z",
  "satisfaction": 5,
  "agreement": false
}
<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <prism-form-field label="Username" [required]="true" error="Username is required">
    <input prismInput formControlName="username" placeholder="Enter username" />
  </prism-form-field>

  <prism-form-field label="Email" error="Invalid email address">
    <prism-input formControlName="email" placeholder="example@domain.com" prefix="mail-line" />
  </prism-form-field>

  <prism-form-field label="Age">
    <prism-input-number formControlName="age" [min]="0" [max]="120" />
  </prism-form-field>

  <prism-form-field label="Interests">
    <prism-select formControlName="interests" [options]="options" [multiple]="true" />
  </prism-form-field>

  <prism-form-field label="Birth Date">
    <prism-date-picker formControlName="birthdate" />
  </prism-form-field>

  <prism-form-field label="Service Satisfaction">
    <prism-rate formControlName="satisfaction" [allowHalf]="true" />
  </prism-form-field>

  <div class="mb-4">
    <prism-radio-group formControlName="gender">
      <prism-radio value="male">Male</prism-radio>
      <prism-radio value="female">Female</prism-radio>
    </prism-radio-group>
  </div>

  <prism-checkbox formControlName="agreement">I accept the terms and conditions</prism-checkbox>

  <prism-button type="submit" [disabled]="!form.valid" label="Submit Application" />
</form>