signalforms: rename [control] to [field]

Author: fmalcher

blog/2025-10-signal-forms-part1/README.md

@@ -3,7 +3,7 @@ title: "Angular Signal Forms Part 1: Getting Started with the Basics"
 author: Danny Koppenhagen and Ferdinand Malcher
 mail: [email protected] # Gravatar
 published: 2025-10-13
-lastModified: 2025-10-13
+lastModified: 2025-10-15
 keywords:
   - Angular
   - Signals
@@ -138,26 +138,26 @@ Once we call a `FieldTree` as a function, we get a `FieldState` as the result.
 ## Connecting Fields to the Template
 
 Now that we have our form structure in place, we need to connect it to our HTML template to create functional input fields with reactive data binding.
-Signal Forms use the `Control` directive to bind form fields to HTML input elements.
+Signal Forms use the `Field` directive to bind form fields to HTML input elements.
 To use the directive, we need to import it first.
 In our example, we also import `JsonPipe` so we can use it in our template to display the current form value.
 
 ```typescript
 import { JsonPipe } from '@angular/common';
-import { /* ... */, Control } from '@angular/forms/signals';
+import { /* ... */, Field } from '@angular/forms/signals';
 // ...
 @Component({
   selector: 'app-registration-form',
-  imports: [Control, JsonPipe],
+  imports: [Field, JsonPipe],
   templateUrl: './registration-form.html',
 })
 export class RegistrationForm {
   // ...
 }
 ```
 
-The `Control` directive works directly with all standard HTML form elements like `<input>`, `<textarea>`, and `<select>`.
-Let's start with a basic template that connects some of our form fields: We apply the directive to the HTML element by using the `[control]` property binding.
+The `Field` directive works directly with all standard HTML form elements like `<input>`, `<textarea>`, and `<select>`.
+Let's start with a basic template that connects some of our form fields: We apply the directive to the HTML element by using the `[field]` property binding.
 On the right side of the binding, we pass the corresponding `FieldTree` from our form structure.
 
 Notice, that we also use the form attribute `novalidate`: It disables the native browser field validation.
@@ -167,20 +167,20 @@ We will handle validation later by using a form schema.
 <form (submit)="submitForm($event)" novalidate>
   <div>
     <label for="username">Username</label>
-    <input id="username" type="text" [control]="registrationForm.username" />
+    <input id="username" type="text" [field]="registrationForm.username" />
   </div>
 
   <div>
     <label for="age">Age</label>
-    <input id="age" type="number" [control]="registrationForm.age" />
+    <input id="age" type="number" [field]="registrationForm.age" />
   </div>
 
   <div>
     <label for="newsletter">Subscribe to newsletter</label>
     <input
       id="newsletter"
       type="checkbox"
-      [control]="registrationForm.newsletter"
+      [field]="registrationForm.newsletter"
     />
   </div>
 
@@ -193,7 +193,7 @@ We will handle validation later by using a form schema.
 ```
 
 We have now connected each input to its corresponding field in our form structure.
-The `Control` directive handles the two-way data binding automatically, keeping our data model synchronized with user input.
+The `Field` directive handles the two-way data binding automatically, keeping our data model synchronized with user input.
 The form model automatically synchronizes with the data signal: To read the value, we can use the signal as well as the `FieldState` with its `value` property.
 
 ### Working with Arrays
@@ -214,7 +214,7 @@ The `registrationForm.email` field returns an array of `FieldTree` objects that
       <div role="group">
         <input
           type="email"
-          [control]="emailField"
+          [field]="emailField"
           [ariaLabel]="'E-Mail ' + $index"
         />
         <button type="button" (click)="removeEmail($index)">-</button>
@@ -508,7 +508,7 @@ Now we can use this component in our form and pass any field to it.
 ```html
 <label>
   Username
-  <input type="text" [control]="registrationForm.username" />
+  <input type="text" [field]="registrationForm.username" />
   <app-form-error [field]="registrationForm.username" />
 </label>
 ```
@@ -527,7 +527,7 @@ You can find a complete demo application for this blog series on GitHub and Stac
 ## What's Next?
 
 Signal Forms provide a modern and powerful way to handle forms in Angular applications.
-Getting started is straightforward and simple: Create a signal, derive the form structure and connect it to the template using the `Control` directive.
+Getting started is straightforward and simple: Create a signal, derive the form structure and connect it to the template using the `Field` directive.
 With schema-based validation, we can define all validation rules in a clear and reusable way.
 
 In this first part, we've covered the fundamentals of Signal Forms:

blog/2025-10-signal-forms-part2/README.md

@@ -61,7 +61,7 @@ In our template, we can now use a `[ariaInvalid]` binding on the input elements
   >Username
   <input
     type="text"
-    [control]="registrationForm.username"
+    [field]="registrationForm.username"
     [ariaInvalid]="ariaInvalidState(registrationForm.username)"
   />
   <app-form-error [field]="registrationForm.username" />
@@ -109,7 +109,7 @@ The validation messages will be displayed in the UI since we included our generi
       <div role="group">
         <input
           type="email"
-          [control]="emailField"
+          [field]="emailField"
           [ariaLabel]="'E-Mail ' + $index"
           [ariaInvalid]="ariaInvalidState(emailField)"
         />
@@ -204,7 +204,7 @@ Errors can be assigned to individual fields (`pw1`) or to the grouping node (`pa
   <input
     type="password"
     autocomplete
-    [control]="registrationForm.password.pw1"
+    [field]="registrationForm.password.pw1"
     [ariaInvalid]="ariaInvalidState(registrationForm.password.pw1)"
   />
   <app-form-error [field]="registrationForm.password.pw1" />
@@ -214,7 +214,7 @@ Errors can be assigned to individual fields (`pw1`) or to the grouping node (`pa
   <input
     type="password"
     autocomplete
-    [control]="registrationForm.password.pw2"
+    [field]="registrationForm.password.pw2"
     [ariaInvalid]="ariaInvalidState(registrationForm.password.pw2)"
   />
   <app-form-error [field]="registrationForm.password.pw2" />
@@ -392,7 +392,7 @@ We can use this state to provide user feedback in the UI:
 <!-- ... -->
 <input
   type="text"
-  [control]="registrationForm.username"
+  [field]="registrationForm.username"
   [ariaInvalid]="ariaInvalidState(registrationForm.username)"
 />
 @if (registrationForm.username().pending()) {
@@ -430,7 +430,7 @@ readonly(fieldPath.someField, (ctx) => !ctx.fieldOf(fieldPath.otherField)().vali
 hidden(fieldPath.someField, (ctx) => !ctx.valueOf(fieldPath.otherField));
 ```
 
-Disabled and read-only states are automatically reflected in the template when using the `[control]` directive.
+Disabled and read-only states are automatically reflected in the template when using the `[field]` directive.
 However, Angular cannot automatically hide fields in the template.
 Instead, it marks the fields as *hidden*, which we can use in our template to conditionally render the fields using `@if`.