{"id":3668,"date":"2026-04-09T13:45:00","date_gmt":"2026-04-09T11:45:00","guid":{"rendered":"https:\/\/www.thecodecampus.de\/blog\/?p=3668"},"modified":"2026-04-09T13:59:27","modified_gmt":"2026-04-09T11:59:27","slug":"angular-signal-forms-schnell-reactive-formulare","status":"publish","type":"post","link":"https:\/\/www.thecodecampus.de\/blog\/angular-signal-forms-schnell-reactive-formulare\/","title":{"rendered":"Signal Forms &#8211; Schnell reaktive Formulare in Angular"},"content":{"rendered":"<p><a href=\"https:\/\/www.thecodecampus.de\/blog\/angular-signal-forms-quick-reactive-forms\/\"><em><strong>Click here for the english version of this blog post.<\/strong><\/em><\/a><\/p>\n<h2>Signal Forms in Angular 21: Der schnellste Weg zu reaktiven Formularen<\/h2>\n<p>Signal Forms verwenden, wie der Name schon sagt, Angular-Signale anstelle von RxJS Observables, um die gew\u00fcnschte Reaktivit\u00e4t in Formularen zu erreichen. Die Verwendung von Signalen f\u00fchrt zu vereinfachtem Code und verbesserter Leistung im Vergleich zum \u00e4lteren Reactive-Forms-Ansatz und bietet gleichzeitig eine einfachere API f\u00fcr die Interaktion als es RxJS Observables tun. Signal Forms befinden sich noch in der Entwicklervorschau, werden aber danach ein hilfreiches Werkzeug sein.<br \/>\nDieser Artikel behandelt die Grundlagen dieser neu hinzugef\u00fcgten Angular-Funktion, damit du deren Vorteile in deinen eigenen Anwendungen nutzen kannst!<\/p>\n<h2>Aufbau und Syntax von Signal-basierten Formularen<\/h2>\n<p>Um ein Signal Form zu erstellen, brauchen wir Folgendes:<\/p>\n<ul>\n<li>Ein Interface, welches beschreibt, wie unsere Daten aufgebaut sind<\/li>\n<li>Ein Signal, das diese Daten enth\u00e4lt<\/li>\n<li>Unser Formular mit diesem Signal initialisieren<\/li>\n<li>Verweise auf die Felder des Signal Forms in dem Template des Formulars<\/li>\n<\/ul>\n<p>Im n\u00e4chsten Abschnitt wird dann erl\u00e4utert, wie man dem Signal Form eine Validierung hinzuf\u00fcgen kann.<\/p>\n<h3>Die Logik: TypeScript-Setup und Signal-Definition<\/h3>\n<p>Zun\u00e4chst definieren wir also einen Datentyp <code>FormData<\/code>:<\/p>\n<pre class=\"lang:ts decode:true\" title=\"Type definition of our form data\">export interface FormData {\r\n  name: string;\r\n  email: string;\r\n  wantsNewsletter: boolean;\r\n}\r\n<\/pre>\n<p>Unser Formular fragt den Benutzer nach folgenden Daten:<\/p>\n<ul>\n<li>Name des Benutzers<\/li>\n<li>E-Mail-Adresse des Benutzers<\/li>\n<li>Ob der Benutzer einen Newsletter erhalten m\u00f6chte<\/li>\n<\/ul>\n<p>Nun k\u00f6nnen wir unser <code>formSignal<\/code> in unserer <code>App<\/code>-Komponente erstellen und dabei einige Standard-Ausgangsdaten verwenden:<\/p>\n<pre class=\"lang:ts decode:true\" title=\"Signal Creation\">formSignal = signal&lt;FormData&gt;({\r\n  name: '',\r\n  email: '',\r\n  wantsNewsletter: true,\r\n});<\/pre>\n<p>und reichen das Signal weiter an die Funktion <code>form<\/code>, um unser Formular zu erstellen:<\/p>\n<pre class=\"lang:ts decode:true\">myForm = form(this.formSignal);<\/pre>\n<p>Dieser Aufruf von <code>form<\/code> erstellt ein <code>FieldTree<\/code>-Objekt. Dieser <code>FieldTree<\/code> stellt die Struktur unseres Formulars als Baum dar und erm\u00f6glicht es uns, \u00fcber Punktnotation auf jedes einzelne Formularfeld zuzugreifen, und m\u00f6glicherweise Validatoren hinzuzuf\u00fcgen sowie Validierungsfehler zu lesen. Weitere Informationen finden Sie in der <a href=\"https:\/\/angular.dev\/api\/forms\/signals\/FieldTree\">Angular-API-Dokumentation<\/a>.<\/p>\n<h3>Das Template: Einbindung im HTML-Code<\/h3>\n<p>Das ist vorerst der gesamte TypeScript-Code, den wir ben\u00f6tigen. Jetzt m\u00fcssen wir nur noch das Markup f\u00fcr unser Formular schreiben.<\/p>\n<p>Wir definieren unser Formular mit zwei normalen Eingabefeldern f\u00fcr den Namen und die E-Mail-Adresse sowie einem Kontrollk\u00e4stchen f\u00fcr das Newsletter-Abonnement. Um diese Eingabefelder mit unserem Signal Form <code>myForm<\/code> zu verkn\u00fcpfen, verwenden wir die Direktive <code>formField<\/code>, um jede Eingabe an das entsprechende Signal im <code>FieldTree<\/code> zu binden.<\/p>\n<pre class=\"lang:ts decode:true\" title=\"Form HTML template\">&lt;form&gt;\r\n  &lt;div&gt;\r\n    &lt;label&gt;\r\n      Name:\r\n      &lt;input [formField]=\"myForm.name\" \/&gt;\r\n    &lt;\/label&gt;\r\n  &lt;\/div&gt;\r\n\r\n  &lt;div&gt;\r\n    &lt;label&gt;\r\n      Email:\r\n      &lt;input [formField]=\"myForm.email\" \/&gt;\r\n    &lt;\/label&gt;\r\n  &lt;\/div&gt;\r\n\r\n  &lt;div&gt;\r\n    &lt;input type=\"checkbox\" [formField]=\"myForm.wantsNewsletter\" \/&gt;\r\n    Subscribe to Newsletter\r\n  &lt;\/div&gt;\r\n&lt;\/form&gt;<\/pre>\n<p>Wir f\u00fcgen unserem Formular auch einen einfachen Button zum Absenden hinzu,<\/p>\n<pre class=\"lang:xhtml decode:true\" title=\"Submit button\">&lt;button (click)=\"submit()\" type=\"button\"&gt;Submit&lt;\/button&gt;<\/pre>\n<p>welcher die Funktion <code>submit()<\/code> verwendet, damit wir unser Signal-Formular testen k\u00f6nnen.<\/p>\n<pre class=\"lang:ts decode:true\" title=\"Submit function\">submit(): void {\r\n  console.log(this.myForm().value());\r\n}<\/pre>\n<p>Nachdem wir einige Daten eingegeben und in die Konsole geschaut haben, k\u00f6nnen wir sehen, dass unser Formular die vom Benutzer angegebenen Daten automatisch verfolgt, und wir sind bereit f\u00fcr den n\u00e4chsten Schritt: die Validierung der Formulareingaben!<\/p>\n<p><a style=\"display: inline-block;\" href=\"https:\/\/www.thecodecampus.de\/schulungen\/angular\"><picture><img decoding=\"async\" class=\"alignnone size-full wp-image-38\" src=\"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2025\/04\/weiter-entwickeln_anne_WP_small.png\" alt=\"Angular Schulungen\" \/><\/picture> <\/a><\/p>\n<h2>Reaktiv und Typ sicher: Validierung mit Signals<\/h2>\n<p>Nat\u00fcrlich m\u00f6chten wir unser Formular auch validieren. Wie k\u00f6nnen wir das mit Signal Forms tun? Gl\u00fccklicherweise bieten Signal Forms auch Zugriff auf integrierte Validatoren. Dies macht es sehr einfach, die Formularvalidierung zu definieren: Wir m\u00fcssen lediglich beim Erstellen eines Formulars festlegen, wie es seine Felder validieren soll, indem wir die bereitgestellten Validatoren verwenden:<\/p>\n<pre class=\"lang:ts decode:true\" title=\"Defining validation for a Signal Form\">myForm = form(this.formSignal, (signalRoot) =&gt; {\r\n  required(signalRoot.name, { message: 'Please enter your name' });\r\n  required(signalRoot.email, { message: 'Please enter you email' });\r\n  email(signalRoot.email, { message: 'Please enter a valid email' });\r\n});<\/pre>\n<p>Um das Validierungsverhalten festzulegen, \u00fcbergeben wir zus\u00e4tzlich eine Funktion an die Funktion <code>form<\/code>. Diese Funktion erh\u00e4lt das zugrunde liegende Signal des Formulars als Argument, und definiert die G\u00fcltigkeitspr\u00fcfungen, die wir durchf\u00fchren m\u00f6chten:<\/p>\n<ul>\n<li>Ein Name ist erforderlich<\/li>\n<li>Eine E-Mail-Adresse ist erforderlich<\/li>\n<li>Die angegebene E-Mail-Adresse muss g\u00fcltig sein<\/li>\n<\/ul>\n<p>Wir geben auch eine hilfreiche Fehlermeldung f\u00fcr jede Validierungspr\u00fcfung an. Wir k\u00f6nnen nun die m\u00f6glicherweise vom Signal-Formular generierten Fehler verwenden und sie dem Benutzer anzeigen:<\/p>\n<pre class=\"lang:ts decode:true\" title=\"Displaying errors\">&lt;form&gt;\r\n  &lt;div&gt;\r\n    &lt;label&gt;\r\n      Name:\r\n      &lt;input [formField]=\"myForm.name\" \/&gt;\r\n    &lt;\/label&gt;\r\n    @if (myForm.name().touched() &amp;&amp; myForm.name().invalid()) {\r\n      @for (error of myForm.name().errors(); track error) {\r\n        &lt;div class=\"error\"&gt;{{error.message}}&lt;\/div&gt;\r\n      }\r\n    }\r\n  &lt;\/div&gt;\r\n\r\n  &lt;div&gt;\r\n    &lt;label&gt;\r\n      Email:\r\n      &lt;input [formField]=\"myForm.email\" \/&gt;\r\n    &lt;\/label&gt;\r\n    @if (myForm.email().touched() &amp;&amp; myForm.email().invalid()) {\r\n      @for (error of myForm.email().errors(); track error) {\r\n        &lt;div class=\"error\"&gt;{{error.message}}&lt;\/div&gt;\r\n      }\r\n    }\r\n  &lt;\/div&gt;\r\n\r\n  &lt;div&gt;\r\n    &lt;input type=\"checkbox\" [formField]=\"myForm.wantsNewsletter\" \/&gt;\r\n    Subscribe to Newsletter\r\n  &lt;\/div&gt;\r\n  \r\n  &lt;button (click)=\"submit()\" type=\"button\" [disabled]=\"myForm.invalid()\"&gt;\r\n    Submit\r\n  &lt;\/button&gt;\r\n\r\n  &lt;\/div&gt;<\/pre>\n<p>Und voil\u00e0, wir haben gerade unser erstes Signal Form mit Validierung erstellt!<\/p>\n<h2>Signal Forms vs. Reactive Forms<\/h2>\n<p>Um zu verdeutlichen, warum Signal Forms das Schreiben von Formularen vereinfachen, implementieren wir dasselbe Formular unter Verwendung des Ansatzes der <a href=\"https:\/\/angular.dev\/guide\/forms\/reactive-forms\">Reactive Forms<\/a>. Wir erstellen unser Formular mit <code>FormGroup<\/code> und <code>FormControl<\/code> und geben dabei die initialen Daten und Validatoren an:<\/p>\n<pre class=\"lang:ts decode:true\" title=\"Reactive Form Creation\">myForm = new FormGroup({\r\n  name: new FormControl('', Validators.required),\r\n  email: new FormControl('', [Validators.required, Validators.email]),\r\n  wantsNewsletter: new FormControl(true),\r\n});<\/pre>\n<p>Und verweisen auf die Formularfelder im Template:<\/p>\n<pre class=\"lang:ts decode:true\" title=\"Reactive Form Template\">&lt;form [formGroup]=\"myForm\"&gt;\r\n  &lt;div&gt;\r\n    &lt;label&gt;\r\n      Name:\r\n      &lt;input formControlName=\"name\" \/&gt;\r\n    &lt;\/label&gt;\r\n    @if (myForm.controls.name.touched &amp;&amp; myForm.controls.name.invalid) {\r\n      &lt;div class=\"error\"&gt;\r\n        @if (myForm.controls.name.hasError('required')) {\r\n          Please enter your name\r\n        }\r\n      &lt;\/div&gt;\r\n    }\r\n  &lt;\/div&gt;\r\n\r\n  &lt;div&gt;\r\n    &lt;label&gt;\r\n      Email:\r\n      &lt;input formControlName=\"email\" \/&gt;\r\n    &lt;\/label&gt;\r\n    @if (myForm.controls.email.touched &amp;&amp; myForm.controls.email.invalid) {\r\n      &lt;div class=\"error\"&gt;\r\n        @if (myForm.controls.email.hasError('required')) {\r\n          Please enter your email\r\n        }\r\n        @if (myForm.controls.email.hasError('email')) {\r\n          Please enter a valid email\r\n        }\r\n      &lt;\/div&gt;\r\n    }\r\n  &lt;\/div&gt;\r\n\r\n  &lt;div&gt;\r\n    &lt;input type=\"checkbox\" formControlName=\"wantsNewsletter\" \/&gt;\r\n    Subscribe to Newsletter\r\n  &lt;\/div&gt;\r\n\r\n  &lt;button type=\"button\" (click)=\"submit()\" [disabled]=\"myForm.invalid\"&gt;\r\n    Submit\r\n  &lt;\/button&gt;\r\n&lt;\/form&gt;<\/pre>\n<p>Moment mal&#8230; Das scheint genau so einfach zu sein, wie das Erstellen eines Signal Forms? Das stimmt, aber das liegt daran, dass wir dem Formular noch keine eigene Reaktivit\u00e4t hinzugef\u00fcgt haben.<\/p>\n<h2>Warum Signal Forms die bessere Wahl f\u00fcr moderne Apps sind<\/h2>\n<p>Stellen wir uns vor, dass das E-Mail-Feld nur dann ausgef\u00fcllt werden muss, wenn der Benutzer den Newsletter auch erhalten m\u00f6chte. Wir k\u00f6nnen dies zu unserem Reactive Form hinzuf\u00fcgen, indem wir das Feld <code>wantsNewsletter<\/code> abonnieren und die E-Mail-Validatoren bei einer \u00c4nderung im Konstruktor unserer Formularkomponente aktualisieren:<\/p>\n<pre class=\"lang:ts decode:true\" title=\"Reactive Form Reactivity\">constructor() {\r\n  this.myForm.controls.wantsNewsletter.valueChanges\r\n    .pipe(takeUntilDestroyed())\r\n    .subscribe((value) =&gt; {\r\n      const emailControl = this.myForm.controls.email;\r\n      if (value) {\r\n        emailControl.setValidators([Validators.required, Validators.email]);\r\n      } else {\r\n        emailControl.clearValidators();\r\n      }\r\n      emailControl.updateValueAndValidity();\r\n    });\r\n}<\/pre>\n<p>An dieser Stelle m\u00fcssen wir uns mit den zugrunde liegenden RxJS Observables des Reactive Form befassen. Wir m\u00fcssen sehr vorsichtig sein und d\u00fcrfen das Observable nur so lange abonnieren, wie es nicht zerst\u00f6rt wird, indem wir <code>takeUntilDestroyed<\/code> aufrufen und den E-Mail-Validierungsstatus mit <code>updateValueAndValidity<\/code> aktualisieren, nachdem wir die Validatoren des E-Mail-Feldes ge\u00e4ndert haben. Dieser Ansatz ist fehleranf\u00e4llig und nicht so intuitiv wie der Signal-Forms-Ansatz, bei dem wir die reaktive G\u00fcltigkeit zusammen mit unseren anderen G\u00fcltigkeitsregeln definieren:<\/p>\n<pre class=\"lang:ts decode:true\" title=\"Signal Form Reactivity\">myForm = form(this.formSignal, (signalRoot) =&gt; {\r\n  required(signalRoot.name, { message: 'Please enter your name' });\r\n  applyWhen(\r\n    signalRoot.email,\r\n    ({ valueOf }) =&gt; valueOf(signalRoot.wantsNewsletter),\r\n    (emailPath) =&gt; {\r\n      required(emailPath, { message: 'Please enter your email' });\r\n      email(emailPath, { message: 'Please enter a valid email' });\r\n    }\r\n  );\r\n});<\/pre>\n<p>Wir f\u00fcgen die erforderlichen E-Mail-Validatoren in einen Aufruf der Funktion <code>applyWhen<\/code> ein. Diese Funktion nimmt ein Formularfeld als erstes Argument, in unserem Fall das E-Mail-Feld, das nur dann auf G\u00fcltigkeit gepr\u00fcft werden soll, wenn eine bestimmte Bedingung erf\u00fcllt ist. Diese Bedingung wird durch das zweite Argument festgelegt, in unserem Fall <code>({ valueOf }) =&gt; valueOf(signalRoot.wantsNewsletter)<\/code>, da wir das E-Mail-Feld nur validieren m\u00f6chten, wenn das Kontrollk\u00e4stchen f\u00fcr den Newsletter aktiviert ist. Wir m\u00fcssen hier die Funktion <code>valueOf<\/code> verwenden, da die Validierungsfunktion keinen direkten Zugriff auf die Werte der Formularfelder hat. Das dritte Argument von <code>applyWhen<\/code> legt das Validierungsverhalten wie zuvor fest.<\/p>\n<p>Wenn wir nun das Kontrollk\u00e4stchen f\u00fcr den Newsletter deaktivieren, m\u00fcssen wir keine E-Mail-Adresse angeben.<\/p>\n<p>Zusammenfassend l\u00e4sst sich sagen, dass Signal Forms gegen\u00fcber den \u00e4lteren Reactive Forms viele Vorteile haben. Durch die Verwendung von Signalen sind sie nicht nur schneller, sondern, wie wir im angegebenen Beispiel gesehen haben, auch wirklich einfach zu schreiben und zu verstehen. Der einzige Nachteil von Signal Forms ist, dass sie derzeit noch ein experimentelles Feature sind und sich die API \u00e4ndern kann. Sie sind also in Produktionsumgebungen mit Vorsicht zu genie\u00dfen, bis sie stabil sind.<\/p>\n<h2>Erfahrung ist der beste Lehrer: Hands-On f\u00fcr\u00a0Signal Forms<\/h2>\n<p>Bist Du bereit, die Theorie in die Praxis umzusetzen? Das Stackblitz enth\u00e4lt nicht nur das Beispiel f\u00fcr die Signal Forms, sondern auch f\u00fcr die Reactive Forms, damit Du direkt alles an einem Ort ausprobieren kannst.<\/p>\n<p><iframe height=\"400\" style=\"width: 100%;\" src=\"https:\/\/stackblitz.com\/edit\/stackblitz-starters-cdfupkzf?embed=1&amp;file=src%2Fmain.ts\" scrolling=\"no\" data-mce-fragment=\"1\"><\/iframe><\/p>\n<h2>Mit welchen Themen geht es weiter?<\/h2>\n<p>Da die Signal Forms einen so gro\u00dfen Einfluss auf das programmieren von reactiven Formularen haben, wollen wir uns auch in den n\u00e4chsten Artikeln noch mit ihnen besch\u00e4ftigen. Wir werden uns anschauen, wie man Signal Forms mit Custom Controls verwenden kann und auch genauer auf die Validierung von Signal Forms weiter eingehen. <a href=\"https:\/\/www.thecodecampus.de\/blog\/angular-guide-signals-und-hot-topics\/\">Einen \u00dcberblick \u00fcber alle aktuellen Artikel und Hot Topics von Angular, findest Du auch in unserem Angular Guide<\/a>.<\/p>\n<h2 id=\"Termin\u00fcbersicht\">Termin\u00fcbersicht der n\u00e4chsten Angular Schulungen<\/h2>\n<p><iframe height=\"600\" style=\"width: 100%;\" src=\"https:\/\/thecodecampus.de\/kalender\"><\/iframe><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Signal Forms verwenden, wie der Name schon sagt, Angular-Signale anstelle von RxJS Observables, um die gew\u00fcnschte Reaktivit\u00e4t in Formularen zu erreichen. Die Verwendung von Signalen f\u00fchrt zu vereinfachtem Code und verbesserter Leistung im Vergleich zum \u00e4lteren Reactive Forms-Ansatz und bietet gleichzeitig eine einfachere API f\u00fcr die Interaktion als RxJS Observables. Signal Forms befinden sich noch in der Entwicklervorschau, werden aber [\u2026]<\/p>\n","protected":false},"author":44,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[73,198,163,168,169,162,183,199,167,95],"tags":[112,195,181,171,37,175,174,194,182],"class_list":["post-3668","post","type-post","status-publish","format-standard","hentry","category-angular","category-angular-21","category-angular-performance-optimization","category-angular-signals","category-change-detection","category-performance","category-reactive-programming","category-signal-forms","category-signals","category-validation","tag-angular","tag-angular-21","tag-angular-performance-optimization","tag-angular-signals","tag-performance","tag-reactive-programming","tag-rxjs","tag-signal-forms","tag-signals"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Signal Forms - Schnell reaktive Formulare in Angular<\/title>\n<meta name=\"description\" content=\"Schneller zu reaktiven Formularen: Angular 21 bringt uns Signal Forms! Erfahre, wie du effiziente Reaktivit\u00e4t mit minimalem Aufwand einbaust.\" \/>\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.thecodecampus.de\/blog\/angular-signal-forms-schnell-reactive-formulare\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Signal Forms - Schnell reaktive Formulare in Angular\" \/>\n<meta property=\"og:description\" content=\"Schneller zu reaktiven Formularen: Angular 21 bringt uns Signal Forms! Erfahre, wie du effiziente Reaktivit\u00e4t mit minimalem Aufwand einbaust.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.thecodecampus.de\/blog\/angular-signal-forms-schnell-reactive-formulare\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Development tips and tricks - theCodeCampus Blog\" \/>\n<meta property=\"article:published_time\" content=\"2026-04-09T11:45:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-09T11:59:27+00:00\" \/>\n<meta name=\"author\" content=\"Martin Ilgner\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Martin Ilgner\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-signal-forms-schnell-reactive-formulare\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-signal-forms-schnell-reactive-formulare\\\/\"},\"author\":{\"name\":\"Martin Ilgner\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#\\\/schema\\\/person\\\/5ccfd18e262c9e4e9f2f06747bc1240d\"},\"headline\":\"Signal Forms &#8211; Schnell reaktive Formulare in Angular\",\"datePublished\":\"2026-04-09T11:45:00+00:00\",\"dateModified\":\"2026-04-09T11:59:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-signal-forms-schnell-reactive-formulare\\\/\"},\"wordCount\":1135,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-signal-forms-schnell-reactive-formulare\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/weiter-entwickeln_anne_WP_small.png\",\"keywords\":[\"Angular\",\"Angular 21\",\"Angular Performance Optimization\",\"Angular Signals\",\"Performance\",\"Reactive Programming\",\"RxJS\",\"Signal Forms\",\"Signals\"],\"articleSection\":[\"Angular\",\"Angular 21\",\"Angular Performance Optimization\",\"Angular Signals\",\"Change Detection\",\"Performance\",\"Reactive Programming\",\"Signal Forms\",\"Signals\",\"Validation\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-signal-forms-schnell-reactive-formulare\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-signal-forms-schnell-reactive-formulare\\\/\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-signal-forms-schnell-reactive-formulare\\\/\",\"name\":\"Signal Forms - Schnell reaktive Formulare in Angular\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-signal-forms-schnell-reactive-formulare\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-signal-forms-schnell-reactive-formulare\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/weiter-entwickeln_anne_WP_small.png\",\"datePublished\":\"2026-04-09T11:45:00+00:00\",\"dateModified\":\"2026-04-09T11:59:27+00:00\",\"description\":\"Schneller zu reaktiven Formularen: Angular 21 bringt uns Signal Forms! Erfahre, wie du effiziente Reaktivit\u00e4t mit minimalem Aufwand einbaust.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-signal-forms-schnell-reactive-formulare\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-signal-forms-schnell-reactive-formulare\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-signal-forms-schnell-reactive-formulare\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/weiter-entwickeln_anne_WP_small.png\",\"contentUrl\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/weiter-entwickeln_anne_WP_small.png\",\"width\":720,\"height\":400},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-signal-forms-schnell-reactive-formulare\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Signal Forms &#8211; Schnell reaktive Formulare in Angular\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/\",\"name\":\"Web Development tips and tricks - theCodeCampus Blog\",\"description\":\"Tips, tricks, and experiences about developing web and mobile applications with Angular, TypeScript, and Testing.\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#organization\",\"name\":\"theCodeCampus\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/01\\\/TCC-Logo-Bildmarke-quadratisch.jpg\",\"contentUrl\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/01\\\/TCC-Logo-Bildmarke-quadratisch.jpg\",\"width\":156,\"height\":156,\"caption\":\"theCodeCampus\"},\"image\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#\\\/schema\\\/person\\\/5ccfd18e262c9e4e9f2f06747bc1240d\",\"name\":\"Martin Ilgner\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/02\\\/martin-ilgner-tcc-author-96x96.jpg\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/02\\\/martin-ilgner-tcc-author-96x96.jpg\",\"contentUrl\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/02\\\/martin-ilgner-tcc-author-96x96.jpg\",\"caption\":\"Martin Ilgner\"},\"description\":\"Hi, I'm Martin, a working student interested in everything related to programming, from backend to frontend and back.\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/author\\\/milgner\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Signal Forms - Schnell reaktive Formulare in Angular","description":"Schneller zu reaktiven Formularen: Angular 21 bringt uns Signal Forms! Erfahre, wie du effiziente Reaktivit\u00e4t mit minimalem Aufwand einbaust.","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.thecodecampus.de\/blog\/angular-signal-forms-schnell-reactive-formulare\/","og_locale":"en_US","og_type":"article","og_title":"Signal Forms - Schnell reaktive Formulare in Angular","og_description":"Schneller zu reaktiven Formularen: Angular 21 bringt uns Signal Forms! Erfahre, wie du effiziente Reaktivit\u00e4t mit minimalem Aufwand einbaust.","og_url":"https:\/\/www.thecodecampus.de\/blog\/angular-signal-forms-schnell-reactive-formulare\/","og_site_name":"Web Development tips and tricks - theCodeCampus Blog","article_published_time":"2026-04-09T11:45:00+00:00","article_modified_time":"2026-04-09T11:59:27+00:00","author":"Martin Ilgner","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Martin Ilgner","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.thecodecampus.de\/blog\/angular-signal-forms-schnell-reactive-formulare\/#article","isPartOf":{"@id":"https:\/\/www.thecodecampus.de\/blog\/angular-signal-forms-schnell-reactive-formulare\/"},"author":{"name":"Martin Ilgner","@id":"https:\/\/www.thecodecampus.de\/blog\/#\/schema\/person\/5ccfd18e262c9e4e9f2f06747bc1240d"},"headline":"Signal Forms &#8211; Schnell reaktive Formulare in Angular","datePublished":"2026-04-09T11:45:00+00:00","dateModified":"2026-04-09T11:59:27+00:00","mainEntityOfPage":{"@id":"https:\/\/www.thecodecampus.de\/blog\/angular-signal-forms-schnell-reactive-formulare\/"},"wordCount":1135,"commentCount":0,"publisher":{"@id":"https:\/\/www.thecodecampus.de\/blog\/#organization"},"image":{"@id":"https:\/\/www.thecodecampus.de\/blog\/angular-signal-forms-schnell-reactive-formulare\/#primaryimage"},"thumbnailUrl":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2025\/04\/weiter-entwickeln_anne_WP_small.png","keywords":["Angular","Angular 21","Angular Performance Optimization","Angular Signals","Performance","Reactive Programming","RxJS","Signal Forms","Signals"],"articleSection":["Angular","Angular 21","Angular Performance Optimization","Angular Signals","Change Detection","Performance","Reactive Programming","Signal Forms","Signals","Validation"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.thecodecampus.de\/blog\/angular-signal-forms-schnell-reactive-formulare\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.thecodecampus.de\/blog\/angular-signal-forms-schnell-reactive-formulare\/","url":"https:\/\/www.thecodecampus.de\/blog\/angular-signal-forms-schnell-reactive-formulare\/","name":"Signal Forms - Schnell reaktive Formulare in Angular","isPartOf":{"@id":"https:\/\/www.thecodecampus.de\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.thecodecampus.de\/blog\/angular-signal-forms-schnell-reactive-formulare\/#primaryimage"},"image":{"@id":"https:\/\/www.thecodecampus.de\/blog\/angular-signal-forms-schnell-reactive-formulare\/#primaryimage"},"thumbnailUrl":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2025\/04\/weiter-entwickeln_anne_WP_small.png","datePublished":"2026-04-09T11:45:00+00:00","dateModified":"2026-04-09T11:59:27+00:00","description":"Schneller zu reaktiven Formularen: Angular 21 bringt uns Signal Forms! Erfahre, wie du effiziente Reaktivit\u00e4t mit minimalem Aufwand einbaust.","breadcrumb":{"@id":"https:\/\/www.thecodecampus.de\/blog\/angular-signal-forms-schnell-reactive-formulare\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.thecodecampus.de\/blog\/angular-signal-forms-schnell-reactive-formulare\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.thecodecampus.de\/blog\/angular-signal-forms-schnell-reactive-formulare\/#primaryimage","url":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2025\/04\/weiter-entwickeln_anne_WP_small.png","contentUrl":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2025\/04\/weiter-entwickeln_anne_WP_small.png","width":720,"height":400},{"@type":"BreadcrumbList","@id":"https:\/\/www.thecodecampus.de\/blog\/angular-signal-forms-schnell-reactive-formulare\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.thecodecampus.de\/blog\/"},{"@type":"ListItem","position":2,"name":"Signal Forms &#8211; Schnell reaktive Formulare in Angular"}]},{"@type":"WebSite","@id":"https:\/\/www.thecodecampus.de\/blog\/#website","url":"https:\/\/www.thecodecampus.de\/blog\/","name":"Web Development tips and tricks - theCodeCampus Blog","description":"Tips, tricks, and experiences about developing web and mobile applications with Angular, TypeScript, and Testing.","publisher":{"@id":"https:\/\/www.thecodecampus.de\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.thecodecampus.de\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.thecodecampus.de\/blog\/#organization","name":"theCodeCampus","url":"https:\/\/www.thecodecampus.de\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.thecodecampus.de\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/01\/TCC-Logo-Bildmarke-quadratisch.jpg","contentUrl":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/01\/TCC-Logo-Bildmarke-quadratisch.jpg","width":156,"height":156,"caption":"theCodeCampus"},"image":{"@id":"https:\/\/www.thecodecampus.de\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.thecodecampus.de\/blog\/#\/schema\/person\/5ccfd18e262c9e4e9f2f06747bc1240d","name":"Martin Ilgner","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2026\/02\/martin-ilgner-tcc-author-96x96.jpg","url":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2026\/02\/martin-ilgner-tcc-author-96x96.jpg","contentUrl":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2026\/02\/martin-ilgner-tcc-author-96x96.jpg","caption":"Martin Ilgner"},"description":"Hi, I'm Martin, a working student interested in everything related to programming, from backend to frontend and back.","url":"https:\/\/www.thecodecampus.de\/blog\/author\/milgner\/"}]}},"_links":{"self":[{"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts\/3668","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/users\/44"}],"replies":[{"embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/comments?post=3668"}],"version-history":[{"count":13,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts\/3668\/revisions"}],"predecessor-version":[{"id":3724,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts\/3668\/revisions\/3724"}],"wp:attachment":[{"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/media?parent=3668"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/categories?post=3668"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/tags?post=3668"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}