{"id":32829,"date":"2026-03-16T20:02:06","date_gmt":"2026-03-16T19:02:06","guid":{"rendered":"https:\/\/www.angulararchitects.io\/blog\/migrating-to-angular-signal-forms-interop-with-reactive-forms\/"},"modified":"2026-03-16T20:18:13","modified_gmt":"2026-03-16T19:18:13","slug":"migrating-to-angular-signal-forms-interop-with-reactive-forms","status":"publish","type":"post","link":"https:\/\/www.angulararchitects.io\/en\/blog\/migrating-to-angular-signal-forms-interop-with-reactive-forms\/","title":{"rendered":"Migrating to Angular Signal Forms: Interop with Reactive Forms"},"content":{"rendered":"
\n\t\t\t\n\t\n\t\n\t\t

\n\t\t\tThis is post 3 of 3 in the series “Signal Forms”<\/em>\t\t<\/p>\n\t\t\t<\/label>\n\n\t\t\t

\n\t\t\t
    \n\t\t\t\t\t\t\t\t\t
  1. Dynamic Forms: Building a Form Generator with Signal Forms<\/a><\/li>\n\t\t\t\t\t\t\t\t\t
  2. Angular Signal Forms – Everything You Need to Know<\/a><\/li>\n\t\t\t\t\t\t\t\t\t
  3. Migrating to Angular Signal Forms: Interop with Reactive Forms<\/span><\/li>\n\t\t\t\t\t\t\t<\/ol>\n\t\t<\/div>\n\t<\/div>\n

    Signals Forms is the new Forms implementation in Angular. However, Reactive Forms will be supported for a long time, and there is already a lot of code using it. Hence, it is important to be able to use both forms implementations in the same application and even in the same form. This allows us to migrate existing forms step by step and to reuse existing code.<\/p>\n

    For this, Angular provides two bridges: SignalFormControl<\/code> and compatForm<\/code>. The first one allows us to use Signal Forms in Reactive Forms, while the second one supports using Reactive Forms in Signal Forms. In this article, I show how to use both bridges and how to mix them in the same form. <\/p>\n

    The following picture shows the example I'm using here. The solid borders denote Signal Forms, and the dashed borders are seen around a Reactive Form: <\/p>\n

    \"Mixing<\/p>\n

    \ud83d\udcc2 Source Code<\/a><\/p>\n

    SignalFormControl: Signal Forms within Ractive Forms<\/h2>\n

    SignalFormControl<\/code>, introduced with Angular 21.2, can be used in a Reactive Form and consists of a Signal validated by a Signal Form schema. Hence, it is a bridge (adapter) between both worlds.<\/p>\n

    This new class is used like a FormControl<\/code>, but instead of reactive validators, it takes a Signal Forms schema:<\/p>\n

    protected readonly phoneNumber = new SignalFormControl('', (path) => {\n  required(path);\n});<\/code><\/pre>\n
    As ordinary form controls, it can be placed in a FormGroup<\/code>:<\/p>\n
    protected readonly passengerGroup = this.formBuilder.nonNullable.group({\n  firstName: '',\n  lastName: '',\n  email: 'me@here.com',\n  phoneNumber: this.phoneNumber,\n});<\/code><\/pre>\n
    From the FormGroup<\/code>'s perspective, the SignalFormControl<\/code> is just an ordinary form control that implements the typical AbstractControl<\/code> interface. Hence, the SignalFormControl<\/code>'s state is propagated upwards. For instance, if the SignalFormControl<\/code> is invalid<\/code>, the whole FormGroup<\/code> is invalid. <\/p>\n
    This is also the case for the value<\/code> property. For instance, when printing out the passengerGroup<\/code>'s value in our example, we can see that it contains the value of the phoneNumber<\/code> SignalFormControl<\/code>:<\/p>\n
    {\n  "passenger": {\n      "firstName": "John",\n      "lastName": "Doe",\n      "email": "john@doe.com",\n      "phoneNumber": "133"\n  }\n}<\/code><\/pre>\n
    In the template, the SignalFormControl<\/code> is used as an ordinary FormControl<\/code>:<\/p>\n
    <fieldset [formGroup]="passengerGroup">\n    <input formControlName="firstName" id="firstName" \/>\n    <input formControlName="lastName" id="lastName" \/>\n    <input formControlName="email" id="email" \/>\n\n    <!-- Signal Form (SignalFormControl) -->\n    <fieldset>\n       <input formControlName="phoneNumber" id="phoneNumber" \/>\n    <\/fieldset>\n\n<\/fieldset><\/code><\/pre>\n
    Under the hood, the control uses a signal. To get it, we can access its sourceValue<\/code> property:<\/p>\n
    protected readonly fullPhoneNumber = computed(\n  () => '+43 ' + this.phoneNumber.sourceValue());<\/code><\/pre>\n
    compatForm: Reactive Forms within Signal Forms<\/h2>\n
    While SignalFormControl<\/code> allows us to use Signal Forms in Reactive Forms, the compatForm<\/code> helper, which has already been part of Angular since version 21.0, allows us to use Reactive Forms in Signal Forms. You can also mix both bridges when migrating a large form.<\/p>\n
    NOTE<\/p>\n
    Modern Angular<\/h3>\n
    More about Signal Forms can be found in my new book Modern Angular - Architecture, Concepts, Implementation<\/a>. This book covers everything you need for building modern business applications with Angular: from Signals and state patterns to architecture, AI assistants, testing, and practical solutions for real-world projects.<\/p>\n
    \"Modern<\/a><\/p>\n
    Learn more about the book \u2192<\/a>\n<\/div>\n<\/p>\n
    To implement this for, we can put the passengerGroup<\/code> from the previous section into a signal:<\/p>\n
    protected readonly checkinFormModel = signal({\n  ticketId: '',\n  conditionsAccepted: false,\n  passenger: this.passengerGroup,\n});<\/code><\/pre>\n
    This signal acts as the basis for a Signal Form. To respect the passengerGroup<\/code>, we pass it to compatForm<\/code> instead of to the form<\/code> function:<\/p>\n
    protected readonly checkinForm = compatForm(this.checkinFormModel, (path) => {\n  required(path.ticketId);\n});<\/code><\/pre>\n
    Now, we can bind the invidiual parts of the form using the typical directives from Signal Forms and Reactive Forms:<\/p>\n
    <!-- Signal Form (compatForm) -->\n<form>\n    <input [formField]="checkinForm.ticketId" \/>\n\n    <!-- Reactive Form -->\n    <fieldset [formGroup]="passengerGroup">\n        <input formControlName="firstName" id="firstName" \/>\n        <input formControlName="lastName" id="lastName" \/>\n        <input formControlName="email" id="email" \/>\n\n        <!-- Signal Form (SignalFormControl) -->\n        <fieldset>\n          <input formControlName="phoneNumber" id="phoneNumber" \/>\n        <\/fieldset>\n\n    <\/fieldset>\n    [...]\n<\/form><\/code><\/pre>\n
    Also, here, form state is propagated upwards. If, for instance, the phoneNumber<\/code> or firstName<\/code> is invalid, the entire form will be invalid as well.<\/p>\n
    However, here we have to remember that our Signal-based form models contain a FormGroup<\/code>. If we want to get a simple JavaScript object with the entire form content, we have to replace this FormGroup<\/code> with its value:<\/p>\n
    const { passenger, ...header } = this.checkinFormModel();\n\nconst checkinInfo = {\n  ...header,\n  passenger: {\n    ...passenger.value,\n  },\n};<\/code><\/pre>\n
    Conclusion<\/h2>\n
    With the new Signal Forms, Angular offers a modern and flexible alternative to the established Reactive Forms. Thanks to the provided bridges, both approaches can be seamlessly combined, and existing applications can be migrated step by step. This enables future-proof development without forgoing proven functionality.<\/p>\n","protected":false},"excerpt":{"rendered":"
    This is post 3 of 3 in the series “Signal Forms” Dynamic Forms: Building a Form Generator with Signal Forms Angular Signal Forms – Everything You Need to Know Migrating to Angular Signal Forms: Interop with Reactive Forms Signals Forms is the new Forms implementation in Angular. However, Reactive Forms will be supported for a […]<\/p>\n","protected":false},"author":25,"featured_media":32818,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_price":"","_stock":"","_tribe_ticket_header":"","_tribe_default_ticket_provider":"","_ticket_start_date":"","_ticket_end_date":"","_tribe_ticket_show_description":"","_tribe_ticket_show_not_going":false,"_tribe_ticket_use_global_stock":"","_tribe_ticket_global_stock_level":"","_global_stock_mode":"","_global_stock_cap":"","_tribe_rsvp_for_event":"","_tribe_ticket_going_count":"","_tribe_ticket_not_going_count":"","_tribe_tickets_list":"[]","_tribe_ticket_has_attendee_info_fields":false,"footnotes":""},"categories":[18],"tags":[],"class_list":["post-32829","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","post_series-signal-forms-en"],"acf":[],"yoast_head":"\nMigrating to Angular Signal Forms: Interop with Reactive Forms - ANGULARarchitects<\/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:\/\/www.angulararchitects.io\/en\/blog\/migrating-to-angular-signal-forms-interop-with-reactive-forms\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Migrating to Angular Signal Forms: Interop with Reactive Forms - ANGULARarchitects\" \/>\n<meta property=\"og:description\" content=\"This is post 3 of 3 in the series “Signal Forms” Dynamic Forms: Building a Form Generator with Signal Forms Angular Signal Forms – Everything You Need to Know Migrating to Angular Signal Forms: Interop with Reactive Forms Signals Forms is the new Forms implementation in Angular. However, Reactive Forms will be supported for a […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.angulararchitects.io\/en\/blog\/migrating-to-angular-signal-forms-interop-with-reactive-forms\/\" \/>\n<meta property=\"og:site_name\" content=\"ANGULARarchitects\" \/>\n<meta property=\"article:published_time\" content=\"2026-03-16T19:02:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-16T19:18:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2026\/03\/Kopie-von-Kopie-von-Kopie-von-Kopie-von-Blue-White-and-Red-Modern-Digital-Marketing-Agency-Facebook-Ad-1200-x-628-px-1024x536.png\" \/>\n<meta name=\"author\" content=\"Manfred Steyer\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2026\/03\/Kopie-von-Kopie-von-Kopie-von-Kopie-von-Blue-White-and-Red-Modern-Digital-Marketing-Agency-Facebook-Ad-1200-x-628-px-1024x536.png\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Manfred Steyer\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/migrating-to-angular-signal-forms-interop-with-reactive-forms\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/migrating-to-angular-signal-forms-interop-with-reactive-forms\/\"},\"author\":{\"name\":\"Manfred Steyer\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/f3de69c1e2bdb5ba04d8d2f5f998b81a\"},\"headline\":\"Migrating to Angular Signal Forms: Interop with Reactive Forms\",\"datePublished\":\"2026-03-16T19:02:06+00:00\",\"dateModified\":\"2026-03-16T19:18:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/migrating-to-angular-signal-forms-interop-with-reactive-forms\/\"},\"wordCount\":562,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/migrating-to-angular-signal-forms-interop-with-reactive-forms\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2026\/03\/shutterstock_2594684125-1.jpg\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.angulararchitects.io\/en\/blog\/migrating-to-angular-signal-forms-interop-with-reactive-forms\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/migrating-to-angular-signal-forms-interop-with-reactive-forms\/\",\"url\":\"https:\/\/www.angulararchitects.io\/en\/blog\/migrating-to-angular-signal-forms-interop-with-reactive-forms\/\",\"name\":\"Migrating to Angular Signal Forms: Interop with Reactive Forms - ANGULARarchitects\",\"isPartOf\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/migrating-to-angular-signal-forms-interop-with-reactive-forms\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/migrating-to-angular-signal-forms-interop-with-reactive-forms\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2026\/03\/shutterstock_2594684125-1.jpg\",\"datePublished\":\"2026-03-16T19:02:06+00:00\",\"dateModified\":\"2026-03-16T19:18:13+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/migrating-to-angular-signal-forms-interop-with-reactive-forms\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.angulararchitects.io\/en\/blog\/migrating-to-angular-signal-forms-interop-with-reactive-forms\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/migrating-to-angular-signal-forms-interop-with-reactive-forms\/#primaryimage\",\"url\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2026\/03\/shutterstock_2594684125-1.jpg\",\"contentUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2026\/03\/shutterstock_2594684125-1.jpg\",\"width\":1408,\"height\":768},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/migrating-to-angular-signal-forms-interop-with-reactive-forms\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.angulararchitects.io\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Migrating to Angular Signal Forms: Interop with Reactive Forms\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#website\",\"url\":\"https:\/\/www.angulararchitects.io\/en\/\",\"name\":\"ANGULARarchitects\",\"description\":\"AngularArchitects.io\",\"publisher\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.angulararchitects.io\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#organization\",\"name\":\"ANGULARarchitects\",\"alternateName\":\"SOFTWAREarchitects\",\"url\":\"https:\/\/www.angulararchitects.io\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg\",\"contentUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg\",\"width\":644,\"height\":216,\"caption\":\"ANGULARarchitects\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/github.com\/angular-architects\",\"https:\/\/www.linkedin.com\/company\/angular-architects\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/f3de69c1e2bdb5ba04d8d2f5f998b81a\",\"name\":\"Manfred Steyer\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/8778dfb353992fa3a0d909beee085a088891e5bfce65cdb3631801da527cf11b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/8778dfb353992fa3a0d909beee085a088891e5bfce65cdb3631801da527cf11b?s=96&d=mm&r=g\",\"caption\":\"Manfred Steyer\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Migrating to Angular Signal Forms: Interop with Reactive Forms - ANGULARarchitects","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:\/\/www.angulararchitects.io\/en\/blog\/migrating-to-angular-signal-forms-interop-with-reactive-forms\/","og_locale":"en_US","og_type":"article","og_title":"Migrating to Angular Signal Forms: Interop with Reactive Forms - ANGULARarchitects","og_description":"This is post 3 of 3 in the series “Signal Forms” Dynamic Forms: Building a Form Generator with Signal Forms Angular Signal Forms – Everything You Need to Know Migrating to Angular Signal Forms: Interop with Reactive Forms Signals Forms is the new Forms implementation in Angular. However, Reactive Forms will be supported for a […]","og_url":"https:\/\/www.angulararchitects.io\/en\/blog\/migrating-to-angular-signal-forms-interop-with-reactive-forms\/","og_site_name":"ANGULARarchitects","article_published_time":"2026-03-16T19:02:06+00:00","article_modified_time":"2026-03-16T19:18:13+00:00","og_image":[{"url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2026\/03\/Kopie-von-Kopie-von-Kopie-von-Kopie-von-Blue-White-and-Red-Modern-Digital-Marketing-Agency-Facebook-Ad-1200-x-628-px-1024x536.png","type":"","width":"","height":""}],"author":"Manfred Steyer","twitter_card":"summary_large_image","twitter_image":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2026\/03\/Kopie-von-Kopie-von-Kopie-von-Kopie-von-Blue-White-and-Red-Modern-Digital-Marketing-Agency-Facebook-Ad-1200-x-628-px-1024x536.png","twitter_misc":{"Written by":"Manfred Steyer","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/migrating-to-angular-signal-forms-interop-with-reactive-forms\/#article","isPartOf":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/migrating-to-angular-signal-forms-interop-with-reactive-forms\/"},"author":{"name":"Manfred Steyer","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/f3de69c1e2bdb5ba04d8d2f5f998b81a"},"headline":"Migrating to Angular Signal Forms: Interop with Reactive Forms","datePublished":"2026-03-16T19:02:06+00:00","dateModified":"2026-03-16T19:18:13+00:00","mainEntityOfPage":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/migrating-to-angular-signal-forms-interop-with-reactive-forms\/"},"wordCount":562,"commentCount":0,"publisher":{"@id":"https:\/\/www.angulararchitects.io\/en\/#organization"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/migrating-to-angular-signal-forms-interop-with-reactive-forms\/#primaryimage"},"thumbnailUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2026\/03\/shutterstock_2594684125-1.jpg","inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.angulararchitects.io\/en\/blog\/migrating-to-angular-signal-forms-interop-with-reactive-forms\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/migrating-to-angular-signal-forms-interop-with-reactive-forms\/","url":"https:\/\/www.angulararchitects.io\/en\/blog\/migrating-to-angular-signal-forms-interop-with-reactive-forms\/","name":"Migrating to Angular Signal Forms: Interop with Reactive Forms - ANGULARarchitects","isPartOf":{"@id":"https:\/\/www.angulararchitects.io\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/migrating-to-angular-signal-forms-interop-with-reactive-forms\/#primaryimage"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/migrating-to-angular-signal-forms-interop-with-reactive-forms\/#primaryimage"},"thumbnailUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2026\/03\/shutterstock_2594684125-1.jpg","datePublished":"2026-03-16T19:02:06+00:00","dateModified":"2026-03-16T19:18:13+00:00","breadcrumb":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/migrating-to-angular-signal-forms-interop-with-reactive-forms\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.angulararchitects.io\/en\/blog\/migrating-to-angular-signal-forms-interop-with-reactive-forms\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/migrating-to-angular-signal-forms-interop-with-reactive-forms\/#primaryimage","url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2026\/03\/shutterstock_2594684125-1.jpg","contentUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2026\/03\/shutterstock_2594684125-1.jpg","width":1408,"height":768},{"@type":"BreadcrumbList","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/migrating-to-angular-signal-forms-interop-with-reactive-forms\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.angulararchitects.io\/en\/"},{"@type":"ListItem","position":2,"name":"Migrating to Angular Signal Forms: Interop with Reactive Forms"}]},{"@type":"WebSite","@id":"https:\/\/www.angulararchitects.io\/en\/#website","url":"https:\/\/www.angulararchitects.io\/en\/","name":"ANGULARarchitects","description":"AngularArchitects.io","publisher":{"@id":"https:\/\/www.angulararchitects.io\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.angulararchitects.io\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.angulararchitects.io\/en\/#organization","name":"ANGULARarchitects","alternateName":"SOFTWAREarchitects","url":"https:\/\/www.angulararchitects.io\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/","url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg","contentUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg","width":644,"height":216,"caption":"ANGULARarchitects"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/github.com\/angular-architects","https:\/\/www.linkedin.com\/company\/angular-architects\/"]},{"@type":"Person","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/f3de69c1e2bdb5ba04d8d2f5f998b81a","name":"Manfred Steyer","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/8778dfb353992fa3a0d909beee085a088891e5bfce65cdb3631801da527cf11b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8778dfb353992fa3a0d909beee085a088891e5bfce65cdb3631801da527cf11b?s=96&d=mm&r=g","caption":"Manfred Steyer"}}]}},"_links":{"self":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts\/32829","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/users\/25"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/comments?post=32829"}],"version-history":[{"count":1,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts\/32829\/revisions"}],"predecessor-version":[{"id":32830,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts\/32829\/revisions\/32830"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/media\/32818"}],"wp:attachment":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/media?parent=32829"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/categories?post=32829"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/tags?post=32829"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}