feat: add example 2 component with form validation and styling

Author: sonusindhu

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);
+}