Merge pull request #113 from sonusindhu/signal-forms

Signal forms - example 2

Author: sonusindhu

src/app/examples/signal-form/example1/example1.component.html

@@ -2,7 +2,7 @@
  <div class="flex flex-wrap gap-2 items-center justify-start mt-4 mb-4">
  <button mat-stroked-button color="primary" routerLink="/signal-forms">Go to List</button>
  <button mat-stroked-button color="primary" disabled>Prev</button>
- <button mat-stroked-button color="primary" disabled="">Next</button>
+ <button mat-stroked-button color="primary" routerLink="/signal-forms/example2">Next</button>
  </div>
 
  <mat-tab-group>

src/app/examples/signal-form/example2/example2.component.html

@@ -0,0 +1,72 @@
+<div class="example-container">
+ <div class="flex flex-wrap gap-2 items-center justify-start mt-4 mb-4">
+ <button mat-stroked-button color="primary" routerLink="/signal-forms">Go to List</button>
+ <button mat-stroked-button color="primary" routerLink="/signal-forms/example1">Prev</button>
+ <button mat-stroked-button color="primary" disabled="">Next</button>
+ </div>
+
+ <mat-tab-group>
+ <mat-tab label="Demo">
+ <div class="content-area">
+ <h2>Example 2: Signal Form Validations</h2>
+ <p>This example demonstrates the use of Angular signals for managing form errors.</p>
+ </div>
+
+ <div class="demo-section">
+ <mat-card>
+ <mat-card-content>
+ 
+
+ <form>
+ <div>
+ <input type="text" placeholder="Enter name" [control]="userForm.name" class="w-full p-2 border border-gray-300 rounded-md text-base mb-4" />
+ @if(userForm.name().touched() || userForm.name().dirty()){
+ @for (item of userForm.name().errors(); track item) {
+ <p class="text-red-500 p-0">{{ item.message }}</p>
+ }
+ }
+ </div>
+
+ <div>
+ <input type="email" placeholder="Enter email" [control]="userForm.email" 
+ class="w-full p-2 border border-gray-300 rounded-md text-base mb-4" />
+ @if(userForm.email().touched() || userForm.email().dirty()){
+ @for (item of userForm.email().errors(); track $index) {
+ <p class="text-red-500 p-0">{{ item.message }}</p>
+ }
+ }
+ </div>
+ </form>
+
+
+ </mat-card-content>
+ </mat-card>
+
+ <h3>Key Features</h3>
+ <mat-card>
+ <mat-card-content>
+ <ul>
+ <li>⚡ Reactive form state with Angular signals</li>
+ <li>✅ Built-in validation and error display</li>
+ <li>🔄 Real-time UI updates on input changes</li>
+ <li>🧩 Minimal, readable form logic</li>
+ <li>🛠️ Easily extensible for more fields and rules</li>
+ </ul>
+ <p>This example demonstrates efficient form state management and validation using Angular signals, with instant error feedback and a clean, extensible approach.</p>
+ </mat-card-content>
+ </mat-card>
+
+ </div>
+ </mat-tab>
+ 
+ <mat-tab label="HTML">
+ <markdown clipboard [src]="'assets/examples/signal-forms/example2/example2.component.html.md'"></markdown>
+ </mat-tab>
+ <mat-tab label="TS">
+ <markdown clipboard [src]="'assets/examples/signal-forms/example2/example2.component.ts.md'"></markdown>
+ </mat-tab>
+ <mat-tab label="SCSS">
+ <markdown clipboard [src]="'assets/examples/signal-forms/example2/example2.component.scss.md'"></markdown>
+ </mat-tab>
+ </mat-tab-group>
+</div>

src/app/examples/signal-form/example2/example2.component.scss

@@ -0,0 +1,20 @@
+:host {
+ display: contents;
+ .demo-section {
+ margin-top: 2rem;
+ display: flex;
+ flex-direction: column;
+ gap: 2rem;
+ align-items: center;
+ width: 100%;
+ margin-left: auto;
+ margin-right: auto;
+ padding-bottom: 2rem;
+ }
+ .demo-section mat-card {
+ width: 100%;
+ max-width: 500px;
+ box-shadow: 0 2px 8px rgba(0,0,0,0.07);
+ border-radius: 8px;
+ }
+}

src/app/examples/signal-form/example2/example2.component.ts

@@ -0,0 +1,50 @@
+import { Component, effect, signal } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatCardModule } from '@angular/material/card';
+import { MatIconModule } from '@angular/material/icon';
+import { MarkdownComponent } from 'ngx-markdown';
+import { RouterModule } from '@angular/router';
+
+import { form, Control, required, pattern, email, schema } from '@angular/forms/signals';
+import { JsonPipe } from '@angular/common';
+
+
+const formSchema = schema<{name: string, email: string}>((form) => {
+ required(form.name, { message: 'please enter your name' });
+ pattern(form.name, /^[a-z ]+$/i, { message: 'Enter valid name' });
+
+
+ required(form.email, { message: 'please enter your email' });
+ email(form.email, { message: 'Enter valid email' });
+});
+
+@Component({
+ selector: 'app-form-example1',
+ imports: [
+ MatButtonModule, 
+ MatTabsModule, 
+ MatCardModule, 
+ MatIconModule, 
+ MarkdownComponent, 
+ RouterModule, 
+ Control,
+ JsonPipe,
+ ],
+ templateUrl: './example2.component.html',
+ styleUrl: './example2.component.scss'
+})
+export class FormExample2Component {
+
+ // create a signal for the user form
+ public user = signal({ name: '', email: '' });
+
+ public errors = effect(() => {
+ console.log('errors - ', this.userForm().errors())
+ return this.userForm().errors();
+ });
+
+ // create a form using the user signal
+ public userForm = form(this.user, formSchema);
+
+}

src/app/examples/signal-form/signal-forms-routings.ts

@@ -9,6 +9,10 @@ const ADVANCED_ROUTES: Route[] = [
  {
  path: 'example1',
  loadComponent: () => import('./example1/example1.component').then(x => x.FormExample1Component),
+ },
+ {
+ path: 'example2',
+ loadComponent: () => import('./example2/example2.component').then(x => x.FormExample2Component),
  }
 ];
 

src/app/examples/signal-form/signal-forms.const.ts

@@ -5,5 +5,10 @@ export const SIGNAL_FORM_EXAMPLES: ExampleModel[] = [
  title: 'Example 1: Basic Signal Form',
  content: 'Demonstrates the use of Angular signals for managing form state.',
  routerLink: '/signal-forms/example1'
+ },
+ {
+ title: 'Example 2: Signal Form Validations',
+ content: 'Showcases validation, error handling, and extensible form logic using Angular signals.',
+ routerLink: '/signal-forms/example2'
  }
 ];

src/assets/examples/signal-forms/example2/example2.component.html.md

@@ -0,0 +1,20 @@
+```html
+<form>
+ <div>
+ <input type="text" placeholder="Enter name" [control]="userForm.name" class="w-full p-2 border border-gray-300 rounded-md text-base mb-4" />
+ @if(userForm.name().touched() || userForm.name().dirty()){
+ @for (item of userForm.name().errors(); track item) {
+ <p class="text-red-500 p-0">{{ item.message }}</p>
+ }
+ }
+ </div>
+ <div>
+ <input type="email" placeholder="Enter email" [control]="userForm.email" class="w-full p-2 border border-gray-300 rounded-md text-base mb-4" />
+ @if(userForm.email().touched() || userForm.email().dirty()){
+ @for (item of userForm.email().errors(); track $index) {
+ <p class="text-red-500 p-0">{{ item.message }}</p>
+ }
+ }
+ </div>
+</form>
+```

src/assets/examples/signal-forms/example2/example2.component.scss.md

@@ -0,0 +1,22 @@
+```scss
+:host {
+ display: contents;
+ .demo-section {
+ margin-top: 2rem;
+ display: flex;
+ flex-direction: column;
+ gap: 2rem;
+ align-items: center;
+ width: 100%;
+ margin-left: auto;
+ margin-right: auto;
+ padding-bottom: 2rem;
+ }
+ .demo-section mat-card {
+ width: 100%;
+ max-width: 500px;
+ box-shadow: 0 2px 8px rgba(0,0,0,0.07);
+ border-radius: 8px;
+ }
+}
+```

src/assets/examples/signal-forms/example2/example2.component.ts.md

@@ -0,0 +1,24 @@
+```ts
+import { Component, effect, signal } from '@angular/core';
+import { form, Control, required, pattern, email, schema } from '@angular/forms/signals';
+
+const formSchema = schema<{name: string, email: string}>((form) => {
+ required(form.name, { message: 'please enter your name' });
+ pattern(form.name, /^[a-z ]+$/i, { message: 'Enter valid name' });
+ required(form.email, { message: 'please enter your email' });
+ email(form.email, { message: 'Enter valid email' });
+});
+
+@Component({
+ selector: 'app-form-example2',
+ templateUrl: './example2.component.html',
+ styleUrl: './example2.component.scss'
+})
+export class FormExample2Component {
+ public user = signal({ name: '', email: '' });
+ public errors = effect(() => {
+ console.log('errors - ', this.userForm().errors())
+ return this.userForm().errors();
+ });
+ public userForm = form(this.user, formSchema);
+}