[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M71BXG4T6KX2GD30E9GEN7BQ":3,"skill-same:01M71BXG4T6KX2GD30E9GEN7BQ":84},{"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":16,"sourceHtmlUrl":17,"categories":18,"keywords":19,"publishedAt":40,"linkOnly":41,"markdownContent":42,"markdownBody":43,"frontMatter":44,"refName":50,"commitSha":51,"skillDirectory":5,"forksCount":14,"repositoryHtmlUrl":52,"repositoryHomepageUrl":6,"ownerHtmlUrl":53,"ownerBlogUrl":54,"ownerDescription":55,"updatedAt":56,"install":57,"resources":70},"01M71BXG4T6KX2GD30E9GEN7BQ","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.","agency-black\u002FSkills","agency-black","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F234862658?v=4","01M6HWVFPNGNR5N2CX9ECSAD57","agencia.black","01M719WF77BF3HN0N9FK1APEFY",0,"MIT","https:\u002F\u002Fgithub.com\u002Fagency-black\u002FSkills\u002Fblob\u002Fmain\u002Fangular-forms\u002FLICENSE","https:\u002F\u002Fgithub.com\u002Fagency-black\u002FSkills\u002Fblob\u002Fmain\u002Fangular-forms\u002FSKILL.md",[],[20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39],"forms","angular forms","angular","schema","conditional","triggers","license","signal","for","development","form","but","automatic","template","signals","libraries","api","new","creation","projects","2026-11-10 10:12:30",false,"---\nname: angular-forms\ndescription: >-\n  Build signal-based forms in Angular v21+ using the new Signal Forms API. Use\n  for form creation with automatic two-way binding, schema-based validation,\n  field state management, and dynamic forms. Triggers on form implementation,\n  adding validation, creating multi-step forms, or building forms with\n  conditional fields. Signal Forms are experimental but recommended for new\n  Angular projects. Don't use for template-driven forms without signals or\n  third-party form libraries like Formly or ngx-formly.\nmetadata:\n  category: development\n  source:\n    repository: 'https:\u002F\u002Fgithub.com\u002Fanalogjs\u002Fangular-skills'\n    path: skills\u002Fangular-forms\n    license_path: LICENSE\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,"metadata":45,"description":7},{"source":46,"category":29},{"path":47,"repository":48,"license_path":49},"skills\u002Fangular-forms","https:\u002F\u002Fgithub.com\u002Fanalogjs\u002Fangular-skills","LICENSE","main","681496e0662f4c45c4758fae9d4510ae87311bf2","https:\u002F\u002Fgithub.com\u002Fagency-black\u002FSkills","https:\u002F\u002Fgithub.com\u002Fagency-black","http:\u002F\u002Fwww.dogma.black","Las grandes ideas merecen una ejecución impecable. Construimos plataformas web, aplicaciones y ecosistemas digitales completos. Esta Trinidad es nuestro dogma.","2026-05-29 16:13:55",{"source":8,"skillName":5,"commands":58,"prompt":68,"zipAvailable":69},[59,62,65],{"tool":60,"command":61},"npx","npx skills add agency-black\u002FSkills --skill angular-forms",{"tool":63,"command":64},"bunx","bunx skills add agency-black\u002FSkills --skill angular-forms",{"tool":66,"command":67},"pnpm","pnpm dlx skills add agency-black\u002FSkills --skill angular-forms","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fagency-black\u002FSkills\u002Fblob\u002Fmain\u002Fangular-forms\u002FSKILL.md",true,[71,74,80],{"path":49,"resourceType":49,"resourceTypeDesc":72,"sizeBytes":73,"sourceHtmlUrl":16},"许可证",1072,{"path":75,"resourceType":76,"resourceTypeDesc":77,"sizeBytes":78,"sourceHtmlUrl":79},"references\u002Fform-patterns.md","REFERENCE","参考文档",9961,"https:\u002F\u002Fgithub.com\u002Fagency-black\u002FSkills\u002Fblob\u002Fmain\u002Fangular-forms\u002Freferences\u002Fform-patterns.md",{"path":81,"resourceType":76,"resourceTypeDesc":77,"sizeBytes":82,"sourceHtmlUrl":83},"references\u002FformvalueControl-patterns.md",2654,"https:\u002F\u002Fgithub.com\u002Fagency-black\u002FSkills\u002Fblob\u002Fmain\u002Fangular-forms\u002Freferences\u002FformvalueControl-patterns.md",[85,111,142,172,197,220],{"skillNo":86,"name":87,"nameZh":6,"description":88,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":89,"categories":90,"keywords":91,"publishedAt":40},"01M71JZVZ0TVW7Z5DQBRWSBG8A","zarr-python","Chunked N-D arrays for cloud storage (Zarr-Python 3). Compressed arrays, parallel I\u002FO, S3\u002FGCS via fsspec, NumPy\u002FDask\u002FXarray compatible, for large-scale scientific computing pipelines.","https:\u002F\u002Fgithub.com\u002Fagency-black\u002FSkills\u002Fblob\u002Fmain\u002Fzarr-python\u002FSKILL.md",[],[92,93,94,95,96,97,98,99,100,101,102,103,104,28,105,106,107,108,109,110],"zarr python","python","zarr","arrays","Cloud Storage","remote","workflows","scientific","read","write","edit","parallel","dask","s3fs","use","numpy","s3","scientific computing","scale",{"skillNo":112,"name":113,"nameZh":6,"description":114,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":115,"sourceHtmlUrl":116,"categories":117,"keywords":123,"publishedAt":40},"01M71JYXC5VAEJT8KXN5GRK32S","xvary-stock-research","Thesis-driven equity analysis from public SEC EDGAR and market data; \u002Fanalyze, \u002Fscore, \u002Fcompare workflows with bundled Python tools (Claude Code, Cursor, Codex).","https:\u002F\u002Fgithub.com\u002Fagency-black\u002FSkills\u002Fblob\u002Fmain\u002Fxvary-stock-research\u002FLICENSE","https:\u002F\u002Fgithub.com\u002Fagency-black\u002FSkills\u002Fblob\u002Fmain\u002Fxvary-stock-research\u002FSKILL.md",[118],{"categoryNo":119,"categoryName":120,"taxonomyType":121,"taxonomyTypeDesc":122},"01JBSEEDCAT000000000000021","资料检索与研究","SCENARIO","使用场景",[124,125,126,127,128,129,130,93,131,98,132,133,134,135,136,137,138,139,140,141],"xvary","stock","research","xvary stock research","sec edgar","community","equity","thesis","analysis","code","Market","compare","market data","analyze","with","codex","cursor","2026",{"skillNo":143,"name":144,"nameZh":6,"description":145,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":146,"licenseFileUrl":147,"sourceHtmlUrl":148,"categories":149,"keywords":156,"publishedAt":40},"01M71JVSDPDQ5040YBN6J1ASKY","webapp-testing","Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.","Apache-2.0","https:\u002F\u002Fgithub.com\u002Fagency-black\u002FSkills\u002Fblob\u002Fmain\u002Fwebapp-testing\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fagency-black\u002FSkills\u002Fblob\u002Fmain\u002Fwebapp-testing\u002FSKILL.md",[150,153],{"categoryNo":151,"categoryName":152,"taxonomyType":121,"taxonomyTypeDesc":122},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":154,"categoryName":155,"taxonomyType":121,"taxonomyTypeDesc":122},"01JBSEEDCAT000000000000009","前端开发",[157,158,159,28,160,161,162,163,164,165,166,138,167,168,169,170,171],"webapp","testing","webapp testing","applications","local","frontend","debugging","toolkit","logs","browser","playwright","web","behavior","ui","screenshots",{"skillNo":173,"name":174,"nameZh":6,"description":175,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":146,"licenseFileUrl":176,"sourceHtmlUrl":177,"categories":178,"keywords":180,"publishedAt":40},"01M71JV64CW7R6FYYK9JWWGW0X","web-artifacts-builder","Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn\u002Fui). Use for complex artifacts requiring state management, routing, or shadcn\u002Fui components - not for simple single-file HTML\u002FJSX artifacts.","https:\u002F\u002Fgithub.com\u002Fagency-black\u002FSkills\u002Fblob\u002Fmain\u002Fweb-artifacts-builder\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fagency-black\u002FSkills\u002Fblob\u002Fmain\u002Fweb-artifacts-builder\u002FSKILL.md",[179],{"categoryNo":154,"categoryName":155,"taxonomyType":121,"taxonomyTypeDesc":122},[181,182,183,168,184,185,186,28,187,188,162,189,106,190,191,192,193,194,195,196],"builder","artifacts builder","artifacts","web artifacts builder","single-file","css","Tailwind","ui components","single","file","components","react","multi","state","routing","state management",{"skillNo":198,"name":199,"nameZh":6,"description":200,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":201,"categories":202,"keywords":204,"publishedAt":40},"01M71JS4X2FRY41DE84DEP06MN","vercel-react-view-transitions","Guide for implementing smooth, native-feeling animations using React's View Transition API (`\u003CViewTransition>` component, `addTransitionType`, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter\u002Fexit of components, animate list reorder, implement directional (forward\u002Fback) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions view transitions, `startViewTransition`, `ViewTransition`, transition types, or asks about animating between UI states in React without third-party animation libraries.","https:\u002F\u002Fgithub.com\u002Fagency-black\u002FSkills\u002Fblob\u002Fmain\u002Fvercel-react-view-transitions\u002FSKILL.md",[203],{"categoryNo":154,"categoryName":155,"taxonomyType":121,"taxonomyTypeDesc":122},[192,205,206,207,208,209,210,211,212,186,213,214,215,216,217,191,36,218,219,35],"vercel react view transitions","view","react view transitions","vercel","transitions","shared","back","Animation","types","states","element","implementing","when","route","create",{"skillNo":221,"name":222,"nameZh":6,"description":223,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":224,"categories":225,"keywords":227,"publishedAt":40},"01M71JS1WZ1J4F9YVC2203JBJW","vercel-react-native-skills","React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.","https:\u002F\u002Fgithub.com\u002Fagency-black\u002FSkills\u002Fblob\u002Fmain\u002Fvercel-react-native-skills\u002FSKILL.md",[226],{"categoryNo":154,"categoryName":155,"taxonomyType":121,"taxonomyTypeDesc":122},[208,228,192,229,230,231,232,233,234,28,235,216,25,106,236,237,217,238,239,191],"vercel react native skills","react native","native","react native skills","modules","platform","animations","performance","react native components","apps","best practices","tasks"]