[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M781XE7FV157V7RHJBWSDEV1":3,"skill-same:01M781XE7FV157V7RHJBWSDEV1":47},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":18,"publishedAt":19,"linkOnly":20,"markdownContent":21,"markdownBody":22,"frontMatter":23,"refName":24,"commitSha":25,"skillDirectory":26,"forksCount":27,"repositoryHtmlUrl":28,"repositoryHomepageUrl":29,"ownerHtmlUrl":30,"ownerBlogUrl":6,"ownerDescription":31,"updatedAt":32,"install":33,"resources":46},"01M781XE7FV157V7RHJBWSDEV1","angular-forms",null,"Build signal-based forms in Angular v21+ using the new Signal Forms API. Use for form creation with automatic two-way binding, schema-based validation, field state management, and dynamic forms. Triggers on form implementation, adding validation, creating multi-step forms, or building forms with conditional fields. Signal Forms are experimental but recommended for new Angular projects. Don't use for template-driven forms without signals or third-party form libraries like Formly or ngx-formly.","Lord1Egypt\u002Fawesome-skill-forge","Lord1Egypt","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F99746359?v=4","01M7592YDNT0XK9WJ0T2MQVPDN","Mohamed Mounir Ali AL Keshita","01M75GRFNHC8VZNWEB8DKDE433",3,"MIT","https:\u002F\u002Fgithub.com\u002FLord1Egypt\u002Fawesome-skill-forge\u002Fblob\u002Fmaster\u002Fcommunity\u002Fskills_sh\u002Fs\u002Fskills-sh_analogjs_angular-skills_angular-forms\u002FSKILL.md",[],[],"2026-11-15 14:19:17",false,"---\nname: angular-forms\ndescription: Build signal-based forms in Angular v21+ using the new Signal Forms API. Use for form creation with automatic two-way binding, schema-based validation, field state management, and dynamic forms. Triggers on form implementation, adding validation, creating multi-step forms, or building forms with conditional fields. Signal Forms are experimental but recommended for new Angular projects. Don't use for template-driven forms without signals or third-party form libraries like Formly or ngx-formly.\n---\n\n# Angular Signal Forms\n\nBuild type-safe, reactive forms using Angular's Signal Forms API. Signal Forms provide automatic two-way binding, schema-based validation, and reactive field state.\n\n**Note:** Signal Forms are experimental in Angular v21. For production apps requiring stability, see [references\u002Fform-patterns.md](references\u002Fform-patterns.md) for Reactive Forms patterns.\n\n## Basic Setup\n\n```typescript\nimport { Component, signal } from '@angular\u002Fcore';\nimport { form, FormField, required, email } from '@angular\u002Fforms\u002Fsignals';\n\ninterface LoginData {\n  email: string;\n  password: string;\n}\n\n@Component({\n  selector: 'app-login',\n  imports: [FormField],\n  template: `\n    \u003Cform (submit)=\"onSubmit($event)\">\n      \u003Clabel>\n        Email\n        \u003Cinput type=\"email\" [formField]=\"loginForm.email\" \u002F>\n      \u003C\u002Flabel>\n      @if (loginForm.email().touched() && loginForm.email().invalid()) {\n        \u003Cp class=\"error\">{{ loginForm.email().errors()[0].message }}\u003C\u002Fp>\n      }\n      \n      \u003Clabel>\n        Password\n        \u003Cinput type=\"password\" [formField]=\"loginForm.password\" \u002F>\n      \u003C\u002Flabel>\n      @if (loginForm.password().touched() && loginForm.password().invalid()) {\n        \u003Cp class=\"error\">{{ loginForm.password().errors()[0].message }}\u003C\u002Fp>\n      }\n      \n      \u003Cbutton type=\"submit\" [disabled]=\"loginForm().invalid()\">Login\u003C\u002Fbutton>\n    \u003C\u002Fform>\n  `,\n})\nexport class Login {\n  \u002F\u002F Form model - a writable signal\n  loginModel = signal\u003CLoginData>({\n    email: '',\n    password: '',\n  });\n  \n  \u002F\u002F Create form with validation schema\n  loginForm = form(this.loginModel, (schemaPath) => {\n    required(schemaPath.email, { message: 'Email is required' });\n    email(schemaPath.email, { message: 'Enter a valid email address' });\n    required(schemaPath.password, { message: 'Password is required' });\n  });\n  \n  onSubmit(event: Event) {\n    event.preventDefault();\n    if (this.loginForm().valid()) {\n      const credentials = this.loginModel();\n      console.log('Submitting:', credentials);\n    }\n  }\n}\n```\n\n## Form Models\n\nForm models are writable signals that serve as the single source of truth:\n\n```typescript\n\u002F\u002F Define interface for type safety\ninterface UserProfile {\n  name: string;\n  email: string;\n  age: number | null;\n  preferences: {\n    newsletter: boolean;\n    theme: 'light' | 'dark';\n  };\n}\n\n\u002F\u002F Create model signal with initial values\nconst userModel = signal\u003CUserProfile>({\n  name: '',\n  email: '',\n  age: null,\n  preferences: {\n    newsletter: false,\n    theme: 'light',\n  },\n});\n\n\u002F\u002F Create form from model\nconst userForm = form(userModel);\n\n\u002F\u002F Access nested fields via dot notation\nuserForm.name                    \u002F\u002F FieldTree\u003Cstring>\nuserForm.preferences.theme       \u002F\u002F FieldTree\u003C'light' | 'dark'>\n```\n\n### Reading Values\n\n```typescript\n\u002F\u002F Read entire model\nconst data = this.userModel();\n\n\u002F\u002F Read field value via field state\nconst name = this.userForm.name().value();\nconst theme = this.userForm.preferences.theme().value();\n```\n\n### Updating Values\n\n```typescript\n\u002F\u002F Replace entire model\nthis.userModel.set({\n  name: 'Alice',\n  email: 'alice@example.com',\n  age: 30,\n  preferences: { newsletter: true, theme: 'dark' },\n});\n\n\u002F\u002F Update single field\nthis.userForm.name().value.set('Bob');\nthis.userForm.age().value.update(age => (age ?? 0) + 1);\n```\n\n## Field State\n\nEach field provides reactive signals for validation, interaction, and availability:\n\n```typescript\nconst emailField = this.form.email();\n\n\u002F\u002F Validation state\nemailField.valid()      \u002F\u002F true if passes all validation\nemailField.invalid()    \u002F\u002F true if has validation errors\nemailField.errors()     \u002F\u002F array of error objects\nemailField.pending()    \u002F\u002F true if async validation in progress\n\n\u002F\u002F Interaction state\nemailField.touched()    \u002F\u002F true after focus + blur\nemailField.dirty()      \u002F\u002F true after user modification\n\n\u002F\u002F Availability state\nemailField.disabled()   \u002F\u002F true if field is disabled\nemailField.hidden()     \u002F\u002F true if field should be hidden\nemailField.readonly()   \u002F\u002F true if field is readonly\n\n\u002F\u002F Value\nemailField.value()      \u002F\u002F current field value (signal)\n```\n\n### Form-Level State\n\nThe form itself is also a field with aggregated state:\n\n```typescript\n\u002F\u002F Form is valid when all interactive fields are valid\nthis.form().valid()\n\n\u002F\u002F Form is touched when any field is touched\nthis.form().touched()\n\n\u002F\u002F Form is dirty when any field is modified\nthis.form().dirty()\n```\n\n## Validation\n\n### Built-in Validators\n\n```typescript\nimport { \n  form, required, email, min, max, \n  minLength, maxLength, pattern \n} from '@angular\u002Fforms\u002Fsignals';\n\nconst userForm = form(this.userModel, (schemaPath) => {\n  \u002F\u002F Required field\n  required(schemaPath.name, { message: 'Name is required' });\n  \n  \u002F\u002F Email format\n  email(schemaPath.email, { message: 'Invalid email' });\n  \n  \u002F\u002F Numeric range\n  min(schemaPath.age, 18, { message: 'Must be 18+' });\n  max(schemaPath.age, 120, { message: 'Invalid age' });\n  \n  \u002F\u002F String\u002Farray length\n  minLength(schemaPath.password, 8, { message: 'Min 8 characters' });\n  maxLength(schemaPath.bio, 500, { message: 'Max 500 characters' });\n  \n  \u002F\u002F Regex pattern\n  pattern(schemaPath.phone, \u002F^\\d{3}-\\d{3}-\\d{4}$\u002F, {\n    message: 'Format: 555-123-4567',\n  });\n});\n```\n\n### Conditional Validation\n\n```typescript\nconst orderForm = form(this.orderModel, (schemaPath) => {\n  required(schemaPath.promoCode, {\n    message: 'Promo code required for discounts',\n    when: ({ valueOf }) => valueOf(schemaPath.applyDiscount),\n  });\n});\n```\n\n### Custom Validators\n\n```typescript\nimport { validate } from '@angular\u002Fforms\u002Fsignals';\n\nconst signupForm = form(this.signupModel, (schemaPath) => {\n  \u002F\u002F Custom validation logic\n  validate(schemaPath.username, ({ value }) => {\n    if (value().includes(' ')) {\n      return { kind: 'noSpaces', message: 'Username cannot contain spaces' };\n    }\n    return null;\n  });\n});\n```\n\n### Cross-Field Validation\n\n```typescript\nconst passwordForm = form(this.passwordModel, (schemaPath) => {\n  required(schemaPath.password);\n  required(schemaPath.confirmPassword);\n  \n  \u002F\u002F Compare fields\n  validate(schemaPath.confirmPassword, ({ value, valueOf }) => {\n    if (value() !== valueOf(schemaPath.password)) {\n      return { kind: 'mismatch', message: 'Passwords do not match' };\n    }\n    return null;\n  });\n});\n```\n\n### Async Validation\n\n```typescript\nimport { validateHttp } from '@angular\u002Fforms\u002Fsignals';\n\nconst signupForm = form(this.signupModel, (schemaPath) => {\n  validateHttp(schemaPath.username, {\n    request: ({ value }) => `\u002Fapi\u002Fcheck-username?u=${value()}`,\n    onSuccess: (response: { taken: boolean }) => {\n      if (response.taken) {\n        return { kind: 'taken', message: 'Username already taken' };\n      }\n      return null;\n    },\n    onError: () => ({\n      kind: 'networkError',\n      message: 'Could not verify username',\n    }),\n  });\n});\n```\n\n## Conditional Fields\n\n### Hidden Fields\n\n```typescript\nimport { hidden } from '@angular\u002Fforms\u002Fsignals';\n\nconst profileForm = form(this.profileModel, (schemaPath) => {\n  hidden(schemaPath.publicUrl, ({ valueOf }) => !valueOf(schemaPath.isPublic));\n});\n```\n\n```html\n@if (!profileForm.publicUrl().hidden()) {\n  \u003Cinput [formField]=\"profileForm.publicUrl\" \u002F>\n}\n```\n\n### Disabled Fields\n\n```typescript\nimport { disabled } from '@angular\u002Fforms\u002Fsignals';\n\nconst orderForm = form(this.orderModel, (schemaPath) => {\n  disabled(schemaPath.couponCode, ({ valueOf }) => valueOf(schemaPath.total) \u003C 50);\n});\n```\n\n### Readonly Fields\n\n```typescript\nimport { readonly } from '@angular\u002Fforms\u002Fsignals';\n\nconst accountForm = form(this.accountModel, (schemaPath) => {\n  readonly(schemaPath.username); \u002F\u002F Always readonly\n});\n```\n\n## Form Submission\n\n```typescript\nimport { submit } from '@angular\u002Fforms\u002Fsignals';\n\n@Component({\n  template: `\n    \u003Cform (submit)=\"onSubmit($event)\">\n      \u003Cinput [formField]=\"form.email\" \u002F>\n      \u003Cinput [formField]=\"form.password\" \u002F>\n      \u003Cbutton type=\"submit\" [disabled]=\"form().invalid()\">Submit\u003C\u002Fbutton>\n    \u003C\u002Fform>\n  `,\n})\nexport class Login {\n  model = signal({ email: '', password: '' });\n  form = form(this.model, (schemaPath) => {\n    required(schemaPath.email);\n    required(schemaPath.password);\n  });\n  \n  onSubmit(event: Event) {\n    event.preventDefault();\n    \n    \u002F\u002F submit() marks all fields touched and runs callback if valid\n    submit(this.form, async () => {\n      await this.authService.login(this.model());\n    });\n  }\n}\n```\n\n## Arrays and Dynamic Fields\n\n```typescript\ninterface Order {\n  items: Array\u003C{ product: string; quantity: number }>;\n}\n\n@Component({\n  template: `\n    @for (item of orderForm.items; track $index; let i = $index) {\n      \u003Cdiv>\n        \u003Cinput [formField]=\"item.product\" placeholder=\"Product\" \u002F>\n        \u003Cinput [formField]=\"item.quantity\" type=\"number\" \u002F>\n        \u003Cbutton type=\"button\" (click)=\"removeItem(i)\">Remove\u003C\u002Fbutton>\n      \u003C\u002Fdiv>\n    }\n    \u003Cbutton type=\"button\" (click)=\"addItem()\">Add Item\u003C\u002Fbutton>\n  `,\n})\nexport class Order {\n  orderModel = signal\u003COrder>({\n    items: [{ product: '', quantity: 1 }],\n  });\n  \n  orderForm = form(this.orderModel, (schemaPath) => {\n    applyEach(schemaPath.items, (item) => {\n      required(item.product, { message: 'Product required' });\n      min(item.quantity, 1, { message: 'Min quantity is 1' });\n    });\n  });\n  \n  addItem() {\n    this.orderModel.update(m => ({\n      ...m,\n      items: [...m.items, { product: '', quantity: 1 }],\n    }));\n  }\n  \n  removeItem(index: number) {\n    this.orderModel.update(m => ({\n      ...m,\n      items: m.items.filter((_, i) => i !== index),\n    }));\n  }\n}\n```\n\n## Displaying Errors\n\n```html\n\u003Cinput [formField]=\"form.email\" \u002F>\n\n@if (form.email().touched() && form.email().invalid()) {\n  \u003Cul class=\"errors\">\n    @for (error of form.email().errors(); track error) {\n      \u003Cli>{{ error.message }}\u003C\u002Fli>\n    }\n  \u003C\u002Ful>\n}\n\n@if (form.email().pending()) {\n  \u003Cspan>Validating...\u003C\u002Fspan>\n}\n```\n\n## Styling Based on State\n\n```html\n\u003Cinput\n  [formField]=\"form.email\"\n  [class.is-invalid]=\"form.email().touched() && form.email().invalid()\"\n  [class.is-valid]=\"form.email().touched() && form.email().valid()\"\n\u002F>\n```\n\n## Reset Form\n\n```typescript\nasync onSubmit() {\n  if (!this.form().valid()) return;\n  \n  await this.api.submit(this.model());\n  \n  \u002F\u002F Clear interaction state\n  this.form().reset();\n  \n  \u002F\u002F Clear values\n  this.model.set({ email: '', password: '' });\n}\n```\n\nFor Reactive Forms patterns (production-stable), see [references\u002Fform-patterns.md](references\u002Fform-patterns.md).\n","# Angular Signal Forms\n\nBuild type-safe, reactive forms using Angular's Signal Forms API. Signal Forms provide automatic two-way binding, schema-based validation, and reactive field state.\n\n**Note:** Signal Forms are experimental in Angular v21. For production apps requiring stability, see [references\u002Fform-patterns.md](references\u002Fform-patterns.md) for Reactive Forms patterns.\n\n## Basic Setup\n\n```typescript\nimport { Component, signal } from '@angular\u002Fcore';\nimport { form, FormField, required, email } from '@angular\u002Fforms\u002Fsignals';\n\ninterface LoginData {\n  email: string;\n  password: string;\n}\n\n@Component({\n  selector: 'app-login',\n  imports: [FormField],\n  template: `\n    \u003Cform (submit)=\"onSubmit($event)\">\n      \u003Clabel>\n        Email\n        \u003Cinput type=\"email\" [formField]=\"loginForm.email\" \u002F>\n      \u003C\u002Flabel>\n      @if (loginForm.email().touched() && loginForm.email().invalid()) {\n        \u003Cp class=\"error\">{{ loginForm.email().errors()[0].message }}\u003C\u002Fp>\n      }\n      \n      \u003Clabel>\n        Password\n        \u003Cinput type=\"password\" [formField]=\"loginForm.password\" \u002F>\n      \u003C\u002Flabel>\n      @if (loginForm.password().touched() && loginForm.password().invalid()) {\n        \u003Cp class=\"error\">{{ loginForm.password().errors()[0].message }}\u003C\u002Fp>\n      }\n      \n      \u003Cbutton type=\"submit\" [disabled]=\"loginForm().invalid()\">Login\u003C\u002Fbutton>\n    \u003C\u002Fform>\n  `,\n})\nexport class Login {\n  \u002F\u002F Form model - a writable signal\n  loginModel = signal\u003CLoginData>({\n    email: '',\n    password: '',\n  });\n  \n  \u002F\u002F Create form with validation schema\n  loginForm = form(this.loginModel, (schemaPath) => {\n    required(schemaPath.email, { message: 'Email is required' });\n    email(schemaPath.email, { message: 'Enter a valid email address' });\n    required(schemaPath.password, { message: 'Password is required' });\n  });\n  \n  onSubmit(event: Event) {\n    event.preventDefault();\n    if (this.loginForm().valid()) {\n      const credentials = this.loginModel();\n      console.log('Submitting:', credentials);\n    }\n  }\n}\n```\n\n## Form Models\n\nForm models are writable signals that serve as the single source of truth:\n\n```typescript\n\u002F\u002F Define interface for type safety\ninterface UserProfile {\n  name: string;\n  email: string;\n  age: number | null;\n  preferences: {\n    newsletter: boolean;\n    theme: 'light' | 'dark';\n  };\n}\n\n\u002F\u002F Create model signal with initial values\nconst userModel = signal\u003CUserProfile>({\n  name: '',\n  email: '',\n  age: null,\n  preferences: {\n    newsletter: false,\n    theme: 'light',\n  },\n});\n\n\u002F\u002F Create form from model\nconst userForm = form(userModel);\n\n\u002F\u002F Access nested fields via dot notation\nuserForm.name                    \u002F\u002F FieldTree\u003Cstring>\nuserForm.preferences.theme       \u002F\u002F FieldTree\u003C'light' | 'dark'>\n```\n\n### Reading Values\n\n```typescript\n\u002F\u002F Read entire model\nconst data = this.userModel();\n\n\u002F\u002F Read field value via field state\nconst name = this.userForm.name().value();\nconst theme = this.userForm.preferences.theme().value();\n```\n\n### Updating Values\n\n```typescript\n\u002F\u002F Replace entire model\nthis.userModel.set({\n  name: 'Alice',\n  email: 'alice@example.com',\n  age: 30,\n  preferences: { newsletter: true, theme: 'dark' },\n});\n\n\u002F\u002F Update single field\nthis.userForm.name().value.set('Bob');\nthis.userForm.age().value.update(age => (age ?? 0) + 1);\n```\n\n## Field State\n\nEach field provides reactive signals for validation, interaction, and availability:\n\n```typescript\nconst emailField = this.form.email();\n\n\u002F\u002F Validation state\nemailField.valid()      \u002F\u002F true if passes all validation\nemailField.invalid()    \u002F\u002F true if has validation errors\nemailField.errors()     \u002F\u002F array of error objects\nemailField.pending()    \u002F\u002F true if async validation in progress\n\n\u002F\u002F Interaction state\nemailField.touched()    \u002F\u002F true after focus + blur\nemailField.dirty()      \u002F\u002F true after user modification\n\n\u002F\u002F Availability state\nemailField.disabled()   \u002F\u002F true if field is disabled\nemailField.hidden()     \u002F\u002F true if field should be hidden\nemailField.readonly()   \u002F\u002F true if field is readonly\n\n\u002F\u002F Value\nemailField.value()      \u002F\u002F current field value (signal)\n```\n\n### Form-Level State\n\nThe form itself is also a field with aggregated state:\n\n```typescript\n\u002F\u002F Form is valid when all interactive fields are valid\nthis.form().valid()\n\n\u002F\u002F Form is touched when any field is touched\nthis.form().touched()\n\n\u002F\u002F Form is dirty when any field is modified\nthis.form().dirty()\n```\n\n## Validation\n\n### Built-in Validators\n\n```typescript\nimport { \n  form, required, email, min, max, \n  minLength, maxLength, pattern \n} from '@angular\u002Fforms\u002Fsignals';\n\nconst userForm = form(this.userModel, (schemaPath) => {\n  \u002F\u002F Required field\n  required(schemaPath.name, { message: 'Name is required' });\n  \n  \u002F\u002F Email format\n  email(schemaPath.email, { message: 'Invalid email' });\n  \n  \u002F\u002F Numeric range\n  min(schemaPath.age, 18, { message: 'Must be 18+' });\n  max(schemaPath.age, 120, { message: 'Invalid age' });\n  \n  \u002F\u002F String\u002Farray length\n  minLength(schemaPath.password, 8, { message: 'Min 8 characters' });\n  maxLength(schemaPath.bio, 500, { message: 'Max 500 characters' });\n  \n  \u002F\u002F Regex pattern\n  pattern(schemaPath.phone, \u002F^\\d{3}-\\d{3}-\\d{4}$\u002F, {\n    message: 'Format: 555-123-4567',\n  });\n});\n```\n\n### Conditional Validation\n\n```typescript\nconst orderForm = form(this.orderModel, (schemaPath) => {\n  required(schemaPath.promoCode, {\n    message: 'Promo code required for discounts',\n    when: ({ valueOf }) => valueOf(schemaPath.applyDiscount),\n  });\n});\n```\n\n### Custom Validators\n\n```typescript\nimport { validate } from '@angular\u002Fforms\u002Fsignals';\n\nconst signupForm = form(this.signupModel, (schemaPath) => {\n  \u002F\u002F Custom validation logic\n  validate(schemaPath.username, ({ value }) => {\n    if (value().includes(' ')) {\n      return { kind: 'noSpaces', message: 'Username cannot contain spaces' };\n    }\n    return null;\n  });\n});\n```\n\n### Cross-Field Validation\n\n```typescript\nconst passwordForm = form(this.passwordModel, (schemaPath) => {\n  required(schemaPath.password);\n  required(schemaPath.confirmPassword);\n  \n  \u002F\u002F Compare fields\n  validate(schemaPath.confirmPassword, ({ value, valueOf }) => {\n    if (value() !== valueOf(schemaPath.password)) {\n      return { kind: 'mismatch', message: 'Passwords do not match' };\n    }\n    return null;\n  });\n});\n```\n\n### Async Validation\n\n```typescript\nimport { validateHttp } from '@angular\u002Fforms\u002Fsignals';\n\nconst signupForm = form(this.signupModel, (schemaPath) => {\n  validateHttp(schemaPath.username, {\n    request: ({ value }) => `\u002Fapi\u002Fcheck-username?u=${value()}`,\n    onSuccess: (response: { taken: boolean }) => {\n      if (response.taken) {\n        return { kind: 'taken', message: 'Username already taken' };\n      }\n      return null;\n    },\n    onError: () => ({\n      kind: 'networkError',\n      message: 'Could not verify username',\n    }),\n  });\n});\n```\n\n## Conditional Fields\n\n### Hidden Fields\n\n```typescript\nimport { hidden } from '@angular\u002Fforms\u002Fsignals';\n\nconst profileForm = form(this.profileModel, (schemaPath) => {\n  hidden(schemaPath.publicUrl, ({ valueOf }) => !valueOf(schemaPath.isPublic));\n});\n```\n\n```html\n@if (!profileForm.publicUrl().hidden()) {\n  \u003Cinput [formField]=\"profileForm.publicUrl\" \u002F>\n}\n```\n\n### Disabled Fields\n\n```typescript\nimport { disabled } from '@angular\u002Fforms\u002Fsignals';\n\nconst orderForm = form(this.orderModel, (schemaPath) => {\n  disabled(schemaPath.couponCode, ({ valueOf }) => valueOf(schemaPath.total) \u003C 50);\n});\n```\n\n### Readonly Fields\n\n```typescript\nimport { readonly } from '@angular\u002Fforms\u002Fsignals';\n\nconst accountForm = form(this.accountModel, (schemaPath) => {\n  readonly(schemaPath.username); \u002F\u002F Always readonly\n});\n```\n\n## Form Submission\n\n```typescript\nimport { submit } from '@angular\u002Fforms\u002Fsignals';\n\n@Component({\n  template: `\n    \u003Cform (submit)=\"onSubmit($event)\">\n      \u003Cinput [formField]=\"form.email\" \u002F>\n      \u003Cinput [formField]=\"form.password\" \u002F>\n      \u003Cbutton type=\"submit\" [disabled]=\"form().invalid()\">Submit\u003C\u002Fbutton>\n    \u003C\u002Fform>\n  `,\n})\nexport class Login {\n  model = signal({ email: '', password: '' });\n  form = form(this.model, (schemaPath) => {\n    required(schemaPath.email);\n    required(schemaPath.password);\n  });\n  \n  onSubmit(event: Event) {\n    event.preventDefault();\n    \n    \u002F\u002F submit() marks all fields touched and runs callback if valid\n    submit(this.form, async () => {\n      await this.authService.login(this.model());\n    });\n  }\n}\n```\n\n## Arrays and Dynamic Fields\n\n```typescript\ninterface Order {\n  items: Array\u003C{ product: string; quantity: number }>;\n}\n\n@Component({\n  template: `\n    @for (item of orderForm.items; track $index; let i = $index) {\n      \u003Cdiv>\n        \u003Cinput [formField]=\"item.product\" placeholder=\"Product\" \u002F>\n        \u003Cinput [formField]=\"item.quantity\" type=\"number\" \u002F>\n        \u003Cbutton type=\"button\" (click)=\"removeItem(i)\">Remove\u003C\u002Fbutton>\n      \u003C\u002Fdiv>\n    }\n    \u003Cbutton type=\"button\" (click)=\"addItem()\">Add Item\u003C\u002Fbutton>\n  `,\n})\nexport class Order {\n  orderModel = signal\u003COrder>({\n    items: [{ product: '', quantity: 1 }],\n  });\n  \n  orderForm = form(this.orderModel, (schemaPath) => {\n    applyEach(schemaPath.items, (item) => {\n      required(item.product, { message: 'Product required' });\n      min(item.quantity, 1, { message: 'Min quantity is 1' });\n    });\n  });\n  \n  addItem() {\n    this.orderModel.update(m => ({\n      ...m,\n      items: [...m.items, { product: '', quantity: 1 }],\n    }));\n  }\n  \n  removeItem(index: number) {\n    this.orderModel.update(m => ({\n      ...m,\n      items: m.items.filter((_, i) => i !== index),\n    }));\n  }\n}\n```\n\n## Displaying Errors\n\n```html\n\u003Cinput [formField]=\"form.email\" \u002F>\n\n@if (form.email().touched() && form.email().invalid()) {\n  \u003Cul class=\"errors\">\n    @for (error of form.email().errors(); track error) {\n      \u003Cli>{{ error.message }}\u003C\u002Fli>\n    }\n  \u003C\u002Ful>\n}\n\n@if (form.email().pending()) {\n  \u003Cspan>Validating...\u003C\u002Fspan>\n}\n```\n\n## Styling Based on State\n\n```html\n\u003Cinput\n  [formField]=\"form.email\"\n  [class.is-invalid]=\"form.email().touched() && form.email().invalid()\"\n  [class.is-valid]=\"form.email().touched() && form.email().valid()\"\n\u002F>\n```\n\n## Reset Form\n\n```typescript\nasync onSubmit() {\n  if (!this.form().valid()) return;\n  \n  await this.api.submit(this.model());\n  \n  \u002F\u002F Clear interaction state\n  this.form().reset();\n  \n  \u002F\u002F Clear values\n  this.model.set({ email: '', password: '' });\n}\n```\n\nFor Reactive Forms patterns (production-stable), see [references\u002Fform-patterns.md](references\u002Fform-patterns.md).\n",{"name":5,"description":7},"master","4aa004da461d820f4ea5499e58eb8d196cf99016","community\u002Fskills_sh\u002Fs\u002Fskills-sh_analogjs_angular-skills_angular-forms",0,"https:\u002F\u002Fgithub.com\u002FLord1Egypt\u002Fawesome-skill-forge","https:\u002F\u002Fskill-explorer-rho.vercel.app","https:\u002F\u002Fgithub.com\u002FLord1Egypt","Unbreakable. Unstoppable. Unmatched⚡.\r\n Speaker of machine tongues 🤖  | World-builder of decentralized dreams 🌐 | Defender of the digital realm🛡️.","2026-06-10 08:21:01",{"source":8,"skillName":5,"commands":34,"prompt":44,"zipAvailable":45},[35,38,41],{"tool":36,"command":37},"npx","npx skills add Lord1Egypt\u002Fawesome-skill-forge --skill angular-forms",{"tool":39,"command":40},"bunx","bunx skills add Lord1Egypt\u002Fawesome-skill-forge --skill angular-forms",{"tool":42,"command":43},"pnpm","pnpm dlx skills add Lord1Egypt\u002Fawesome-skill-forge --skill angular-forms","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FLord1Egypt\u002Fawesome-skill-forge\u002Fblob\u002Fmaster\u002Fcommunity\u002Fskills_sh\u002Fs\u002Fskills-sh_analogjs_angular-skills_angular-forms\u002FSKILL.md",true,[],[48,55,62,69,76,83],{"skillNo":49,"name":50,"nameZh":6,"description":51,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":52,"categories":53,"keywords":54,"publishedAt":19},"01M785WKJB99G3STR1NF9NRTJW","youtube-content","YouTube transcripts to summaries, threads, blogs.","https:\u002F\u002Fgithub.com\u002FLord1Egypt\u002Fawesome-skill-forge\u002Fblob\u002Fmaster\u002Fskills\u002Fyoutube-content\u002FSKILL.md",[],[],{"skillNo":56,"name":57,"nameZh":6,"description":58,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":59,"categories":60,"keywords":61,"publishedAt":19},"01M785WEFHB0G2S9YA6EPR3H0E","xurl","X\u002FTwitter via xurl CLI: post, search, DM, media, v2 API.","https:\u002F\u002Fgithub.com\u002FLord1Egypt\u002Fawesome-skill-forge\u002Fblob\u002Fmaster\u002Fskills\u002Fxurl\u002FSKILL.md",[],[],{"skillNo":63,"name":64,"nameZh":6,"description":65,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":66,"categories":67,"keywords":68,"publishedAt":19},"01M785W98EDN4EFJXJPMQEHCRC","touchdesigner-mcp","Control a running TouchDesigner instance via twozero MCP — create operators, set parameters, wire connections, execute Python, build real-time visuals. 36 native tools.","https:\u002F\u002Fgithub.com\u002FLord1Egypt\u002Fawesome-skill-forge\u002Fblob\u002Fmaster\u002Fskills\u002Ftouchdesigner-mcp\u002FSKILL.md",[],[],{"skillNo":70,"name":71,"nameZh":6,"description":72,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":73,"categories":74,"keywords":75,"publishedAt":19},"01M785W5S9FP3QBH2V191E025P","test-driven-development","TDD: enforce RED-GREEN-REFACTOR, tests before code.","https:\u002F\u002Fgithub.com\u002FLord1Egypt\u002Fawesome-skill-forge\u002Fblob\u002Fmaster\u002Fskills\u002Ftest-driven-development\u002FSKILL.md",[],[],{"skillNo":77,"name":78,"nameZh":6,"description":79,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":80,"categories":81,"keywords":82,"publishedAt":19},"01M785W2AS08NSSH9YATCV6FJB","teams-meeting-pipeline","Operate the Teams meeting summary pipeline via Hermes CLI — summarize meetings, inspect pipeline status, replay jobs, manage Microsoft Graph subscriptions.","https:\u002F\u002Fgithub.com\u002FLord1Egypt\u002Fawesome-skill-forge\u002Fblob\u002Fmaster\u002Fskills\u002Fteams-meeting-pipeline\u002FSKILL.md",[],[],{"skillNo":84,"name":85,"nameZh":6,"description":86,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":87,"categories":88,"keywords":89,"publishedAt":19},"01M785VXKW4T34BTP1SCHW1R7F","systematic-debugging","4-phase root cause debugging: understand bugs before fixing.","https:\u002F\u002Fgithub.com\u002FLord1Egypt\u002Fawesome-skill-forge\u002Fblob\u002Fmaster\u002Fskills\u002Fsystematic-debugging\u002FSKILL.md",[],[]]