{"id":1206,"date":"2026-03-11T15:51:34","date_gmt":"2026-03-11T18:51:34","guid":{"rendered":"https:\/\/maurobernal.com.ar\/blog\/?p=1206"},"modified":"2026-03-11T16:12:19","modified_gmt":"2026-03-11T19:12:19","slug":"angular-21-signal-forms-formularios-reactivos","status":"publish","type":"post","link":"https:\/\/maurobernal.com.ar\/blog\/angular-21-signal-forms-formularios-reactivos\/","title":{"rendered":"Signal Forms: cuando los formularios reactivos finalmente tienen sentido"},"content":{"rendered":"\n

Los formularios reactivos de Angular siempre me parecieron demasiado verbosos. Crear un FormGroup, definir los FormControl, suscribirse a valueChanges, acordarse de hacer unsubscribe… Signal Forms simplifica todo eso. El formulario es sincr\u00f3nico, tipado y reactivo sin esfuerzo.<\/p>\n\n\n\n

El problema con FormGroup y FormControl<\/h2>\n\n\n\n
\/\/ ❌ FormGroup cl\u00e1sico: verboso y con memory leaks potenciales\nimport { FormBuilder, Validators } from '@angular\/forms';\n\n@Component({ ... })\nexport class LoginClasico implements OnDestroy {\n  private destroy$ = new Subject<void>();\n\n  form = this.fb.group({\n    email: ['', [Validators.required, Validators.email]],\n    password: ['', [Validators.required, Validators.minLength(8)]]\n  });\n\n  constructor(private fb: FormBuilder) {\n    this.form.valueChanges\n      .pipe(takeUntil(this.destroy$))\n      .subscribe(val => console.log(val));\n  }\n\n  ngOnDestroy() { this.destroy$.next(); this.destroy$.complete(); }\n}<\/code><\/pre>\n\n\n\n
Signal Forms: la forma moderna<\/h2>\n\n\n\n
\/\/ ✅ Signal Forms: sincr\u00f3nico, tipado, sin suscripciones\nimport { Component } from '@angular\/core';\nimport { form, field } from '@angular\/forms\/signals';\nimport { Validators } from '@angular\/forms';\n\n@Component({\n  selector: 'app-login',\n  template: `\n    <form (ngSubmit)=\"onSubmit()\">\n      <div>\n        <label>Email<\/label>\n        <input type=\"email\" [formField]=\"loginForm.controls.email\" \/>\n        @if (loginForm.controls.email.invalid() && loginForm.controls.email.touched()) {\n          <span class=\"error\">Email inv\u00e1lido<\/span>\n        }\n      <\/div>\n      <div>\n        <label>Password<\/label>\n        <input type=\"password\" [formField]=\"loginForm.controls.password\" \/>\n      <\/div>\n      <button type=\"submit\" [disabled]=\"!loginForm.valid()\">Ingresar<\/button>\n    <\/form>\n  `\n})\nexport class LoginComponent {\n  loginForm = form({\n    email: field('', [Validators.required, Validators.email]),\n    password: field('', [Validators.required, Validators.minLength(8)])\n  });\n\n  onSubmit() {\n    if (this.loginForm.valid()) {\n      const { email, password } = this.loginForm.value();\n      console.log('Login con:', email);\n    }\n  }\n}<\/code><\/pre>\n\n\n\n
Formularios din\u00e1micos con Signal Forms<\/h2>\n\n\n\n
import { Component, computed } from '@angular\/core';\nimport { form, field } from '@angular\/forms\/signals';\nimport { Validators } from '@angular\/forms';\n\n@Component({\n  selector: 'app-registro',\n  template: `\n    <form>\n      <input type=\"text\" [formField]=\"registroForm.controls.nombre\" placeholder=\"Nombre\" \/>\n      <input type=\"email\" [formField]=\"registroForm.controls.email\" placeholder=\"Email\" \/>\n\n      <label>\n        <input type=\"checkbox\" [formField]=\"registroForm.controls.esEmpresa\" \/>\n        Registro como empresa\n      <\/label>\n\n      @if (registroForm.controls.esEmpresa.value()) {\n        <input type=\"text\" [formField]=\"registroForm.controls.razonSocial\" placeholder=\"Raz\u00f3n Social\" \/>\n        <input type=\"text\" [formField]=\"registroForm.controls.cuit\" placeholder=\"CUIT\" \/>\n      }\n\n      <p>Completado: {{ camposCompletados() }}\/{{ totalCampos() }}<\/p>\n      <button [disabled]=\"!registroForm.valid()\">Registrarse<\/button>\n    <\/form>\n  `\n})\nexport class RegistroComponent {\n  registroForm = form({\n    nombre: field('', Validators.required),\n    email: field('', [Validators.required, Validators.email]),\n    esEmpresa: field(false),\n    razonSocial: field(''),\n    cuit: field('')\n  });\n\n  camposCompletados = computed(() =>\n    Object.values(this.registroForm.controls)\n      .filter(c => c.value() !== '' && c.value() !== false).length\n  );\n\n  totalCampos = computed(() =>\n    this.registroForm.controls.esEmpresa.value() ? 5 : 3\n  );\n}<\/code><\/pre>\n\n\n\n
Migraci\u00f3n gradual: FormGroup y Signal Forms coexisten<\/h2>\n\n\n\n
No hay que reescribir todo de una vez. Angular 21 permite tener ambos sistemas en paralelo. Mi estrategia: nuevos formularios con Signal Forms, los existentes se migran cuando hay un motivo concreto (bug, refactor, mejora de rendimiento).<\/p>\n\n\n\n
Lo que m\u00e1s me gusta de Signal Forms<\/h2>\n\n\n\n
No tener que pensar en el ciclo de vida de las suscripciones. Con FormGroup siempre hab\u00eda ese riesgo latente de un memory leak por un valueChanges<\/code> sin unsubscribe<\/code>. Con Signal Forms, el formulario es un valor reactivo sincr\u00f3nico: lo leo con loginForm.value()<\/code>, verifico con loginForm.valid()<\/code>, y Angular maneja el resto. Menos c\u00f3digo, menos bugs.<\/p>\n\n
\n
\u2190 Art\u00edculo anterior: Adi\u00f3s Zone.js: c\u00f3mo Angular 21 cambi\u00f3 la detecci\u00f3n de cambios para siempre<\/a> | Serie Angular 20 \u2192 21.2<\/strong> | Pr\u00f3ximo: Novedades del template en Angular 21: regex, spread, instanceof y m\u00e1s \u2192<\/a><\/em><\/p>","protected":false},"excerpt":{"rendered":"
Signal Forms en Angular 21: form() y field() reemplazan FormGroup y FormControl. Sin suscripciones, tipado completo, valores sincr\u00f3nicos. Ejemplos reales y migraci\u00f3n gradual.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[273],"tags":[274,291,280,276,281,275,278],"class_list":["post-1206","post","type-post","status-publish","format-standard","hentry","category-angular","tag-angular","tag-angular21","tag-forms","tag-frontend","tag-reactive-forms","tag-signals","tag-typescript"],"yoast_head":"\nSignal Forms: cuando los formularios reactivos finalmente tienen sentido · devops Mauro Bernal<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/maurobernal.com.ar\/blog\/angular-21-signal-forms-formularios-reactivos\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Signal Forms: cuando los formularios reactivos finalmente tienen sentido · devops Mauro Bernal\" \/>\n<meta property=\"og:description\" content=\"Signal Forms en Angular 21: form() y field() reemplazan FormGroup y FormControl. Sin suscripciones, tipado completo, valores sincr\u00f3nicos. Ejemplos reales y migraci\u00f3n gradual.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/maurobernal.com.ar\/blog\/angular-21-signal-forms-formularios-reactivos\/\" \/>\n<meta property=\"og:site_name\" content=\"devops Mauro Bernal\" \/>\n<meta property=\"article:published_time\" content=\"2026-03-11T18:51:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-11T19:12:19+00:00\" \/>\n<meta name=\"author\" content=\"Mauro Bernal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@_maurobernal\" \/>\n<meta name=\"twitter:site\" content=\"@_maurobernal\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mauro Bernal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/angular-21-signal-forms-formularios-reactivos\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/angular-21-signal-forms-formularios-reactivos\\\/\"},\"author\":{\"name\":\"Mauro Bernal\",\"@id\":\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/#\\\/schema\\\/person\\\/09c4dbdfb59b20e015c703fd19713283\"},\"headline\":\"Signal Forms: cuando los formularios reactivos finalmente tienen sentido\",\"datePublished\":\"2026-03-11T18:51:34+00:00\",\"dateModified\":\"2026-03-11T19:12:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/angular-21-signal-forms-formularios-reactivos\\\/\"},\"wordCount\":203,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/#\\\/schema\\\/person\\\/09c4dbdfb59b20e015c703fd19713283\"},\"keywords\":[\"angular\",\"angular21\",\"forms\",\"frontend\",\"reactive-forms\",\"signals\",\"typescript\"],\"articleSection\":[\"Angular\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/angular-21-signal-forms-formularios-reactivos\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/angular-21-signal-forms-formularios-reactivos\\\/\",\"url\":\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/angular-21-signal-forms-formularios-reactivos\\\/\",\"name\":\"Signal Forms: cuando los formularios reactivos finalmente tienen sentido · devops Mauro Bernal\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/#website\"},\"datePublished\":\"2026-03-11T18:51:34+00:00\",\"dateModified\":\"2026-03-11T19:12:19+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/angular-21-signal-forms-formularios-reactivos\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/angular-21-signal-forms-formularios-reactivos\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/angular-21-signal-forms-formularios-reactivos\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Signal Forms: cuando los formularios reactivos finalmente tienen sentido\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/\",\"name\":\"devops Mauro Bernal\",\"description\":\"Cuando tu trabajo es hacer que las cosas funcionen bien...\",\"publisher\":{\"@id\":\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/#\\\/schema\\\/person\\\/09c4dbdfb59b20e015c703fd19713283\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/#\\\/schema\\\/person\\\/09c4dbdfb59b20e015c703fd19713283\",\"name\":\"Mauro Bernal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/i0.wp.com\\\/maurobernal.com.ar\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/logo-maurobernal.png?fit=1740%2C1740&ssl=1\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/maurobernal.com.ar\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/logo-maurobernal.png?fit=1740%2C1740&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/maurobernal.com.ar\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/logo-maurobernal.png?fit=1740%2C1740&ssl=1\",\"width\":1740,\"height\":1740,\"caption\":\"Mauro Bernal\"},\"logo\":{\"@id\":\"https:\\\/\\\/i0.wp.com\\\/maurobernal.com.ar\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/logo-maurobernal.png?fit=1740%2C1740&ssl=1\"},\"description\":\"Desarrollo de Sistemas en .Net, IT Callcenters, DBA de SQL Server, Mikrotik, Pentest y T\u00e9cnico consultor de Sistemas Bejerman\",\"sameAs\":[\"https:\\\/\\\/maurobernal.com.ar\",\"https:\\\/\\\/x.com\\\/_maurobernal\",\"https:\\\/\\\/youtube.com\\\/maurobernal\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Signal Forms: cuando los formularios reactivos finalmente tienen sentido · devops Mauro Bernal","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/maurobernal.com.ar\/blog\/angular-21-signal-forms-formularios-reactivos\/","og_locale":"es_ES","og_type":"article","og_title":"Signal Forms: cuando los formularios reactivos finalmente tienen sentido · devops Mauro Bernal","og_description":"Signal Forms en Angular 21: form() y field() reemplazan FormGroup y FormControl. Sin suscripciones, tipado completo, valores sincr\u00f3nicos. Ejemplos reales y migraci\u00f3n gradual.","og_url":"https:\/\/maurobernal.com.ar\/blog\/angular-21-signal-forms-formularios-reactivos\/","og_site_name":"devops Mauro Bernal","article_published_time":"2026-03-11T18:51:34+00:00","article_modified_time":"2026-03-11T19:12:19+00:00","author":"Mauro Bernal","twitter_card":"summary_large_image","twitter_creator":"@_maurobernal","twitter_site":"@_maurobernal","twitter_misc":{"Escrito por":"Mauro Bernal","Tiempo de lectura":"3 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/maurobernal.com.ar\/blog\/angular-21-signal-forms-formularios-reactivos\/#article","isPartOf":{"@id":"https:\/\/maurobernal.com.ar\/blog\/angular-21-signal-forms-formularios-reactivos\/"},"author":{"name":"Mauro Bernal","@id":"https:\/\/maurobernal.com.ar\/blog\/#\/schema\/person\/09c4dbdfb59b20e015c703fd19713283"},"headline":"Signal Forms: cuando los formularios reactivos finalmente tienen sentido","datePublished":"2026-03-11T18:51:34+00:00","dateModified":"2026-03-11T19:12:19+00:00","mainEntityOfPage":{"@id":"https:\/\/maurobernal.com.ar\/blog\/angular-21-signal-forms-formularios-reactivos\/"},"wordCount":203,"commentCount":0,"publisher":{"@id":"https:\/\/maurobernal.com.ar\/blog\/#\/schema\/person\/09c4dbdfb59b20e015c703fd19713283"},"keywords":["angular","angular21","forms","frontend","reactive-forms","signals","typescript"],"articleSection":["Angular"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/maurobernal.com.ar\/blog\/angular-21-signal-forms-formularios-reactivos\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/maurobernal.com.ar\/blog\/angular-21-signal-forms-formularios-reactivos\/","url":"https:\/\/maurobernal.com.ar\/blog\/angular-21-signal-forms-formularios-reactivos\/","name":"Signal Forms: cuando los formularios reactivos finalmente tienen sentido · devops Mauro Bernal","isPartOf":{"@id":"https:\/\/maurobernal.com.ar\/blog\/#website"},"datePublished":"2026-03-11T18:51:34+00:00","dateModified":"2026-03-11T19:12:19+00:00","breadcrumb":{"@id":"https:\/\/maurobernal.com.ar\/blog\/angular-21-signal-forms-formularios-reactivos\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/maurobernal.com.ar\/blog\/angular-21-signal-forms-formularios-reactivos\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/maurobernal.com.ar\/blog\/angular-21-signal-forms-formularios-reactivos\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/maurobernal.com.ar\/blog\/"},{"@type":"ListItem","position":2,"name":"Signal Forms: cuando los formularios reactivos finalmente tienen sentido"}]},{"@type":"WebSite","@id":"https:\/\/maurobernal.com.ar\/blog\/#website","url":"https:\/\/maurobernal.com.ar\/blog\/","name":"devops Mauro Bernal","description":"Cuando tu trabajo es hacer que las cosas funcionen bien...","publisher":{"@id":"https:\/\/maurobernal.com.ar\/blog\/#\/schema\/person\/09c4dbdfb59b20e015c703fd19713283"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/maurobernal.com.ar\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":["Person","Organization"],"@id":"https:\/\/maurobernal.com.ar\/blog\/#\/schema\/person\/09c4dbdfb59b20e015c703fd19713283","name":"Mauro Bernal","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/i0.wp.com\/maurobernal.com.ar\/blog\/wp-content\/uploads\/2023\/07\/logo-maurobernal.png?fit=1740%2C1740&ssl=1","url":"https:\/\/i0.wp.com\/maurobernal.com.ar\/blog\/wp-content\/uploads\/2023\/07\/logo-maurobernal.png?fit=1740%2C1740&ssl=1","contentUrl":"https:\/\/i0.wp.com\/maurobernal.com.ar\/blog\/wp-content\/uploads\/2023\/07\/logo-maurobernal.png?fit=1740%2C1740&ssl=1","width":1740,"height":1740,"caption":"Mauro Bernal"},"logo":{"@id":"https:\/\/i0.wp.com\/maurobernal.com.ar\/blog\/wp-content\/uploads\/2023\/07\/logo-maurobernal.png?fit=1740%2C1740&ssl=1"},"description":"Desarrollo de Sistemas en .Net, IT Callcenters, DBA de SQL Server, Mikrotik, Pentest y T\u00e9cnico consultor de Sistemas Bejerman","sameAs":["https:\/\/maurobernal.com.ar","https:\/\/x.com\/_maurobernal","https:\/\/youtube.com\/maurobernal"]}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/maurobernal.com.ar\/blog\/wp-json\/wp\/v2\/posts\/1206","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/maurobernal.com.ar\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/maurobernal.com.ar\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/maurobernal.com.ar\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/maurobernal.com.ar\/blog\/wp-json\/wp\/v2\/comments?post=1206"}],"version-history":[{"count":3,"href":"https:\/\/maurobernal.com.ar\/blog\/wp-json\/wp\/v2\/posts\/1206\/revisions"}],"predecessor-version":[{"id":1227,"href":"https:\/\/maurobernal.com.ar\/blog\/wp-json\/wp\/v2\/posts\/1206\/revisions\/1227"}],"wp:attachment":[{"href":"https:\/\/maurobernal.com.ar\/blog\/wp-json\/wp\/v2\/media?parent=1206"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/maurobernal.com.ar\/blog\/wp-json\/wp\/v2\/categories?post=1206"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/maurobernal.com.ar\/blog\/wp-json\/wp\/v2\/tags?post=1206"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}