@if (loginForm.password().invalid()) {
@@ -45,7 +45,7 @@ interface LoginData {
`,
styleUrl: 'main.css',
- imports: [Field],
+ imports: [FormField],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class LoginApp {
diff --git a/adev/src/content/tutorials/signal-forms/steps/2-connect-form-template/README.md b/adev/src/content/tutorials/signal-forms/steps/2-connect-form-template/README.md
index de371dc11e8..e72b9d32a6e 100644
--- a/adev/src/content/tutorials/signal-forms/steps/2-connect-form-template/README.md
+++ b/adev/src/content/tutorials/signal-forms/steps/2-connect-form-template/README.md
@@ -1,11 +1,11 @@
# Connect your form to the template
-Now, you need to connect your form to the template using the `[field]` directive. This creates two-way data binding between your form model and the input elements.
+Now, you need to connect your form to the template using the `[formField]` directive. This creates two-way data binding between your form model and the input elements.
In this lesson, you'll learn how to:
-- Import the `Field` directive
-- Use the `[field]` directive to bind form fields to inputs
+- Import the `FormField` directive
+- Use the `[formField]` directive to bind form fields to inputs
- Connect text inputs and checkboxes to your form
- Display form field values in the template
@@ -15,17 +15,17 @@ Let's wire up the template!
-
-Import the `Field` directive from `@angular/forms/signals` and add it to your component's imports array:
+
+Import the `FormField` directive from `@angular/forms/signals` and add it to your component's imports array:
```ts
-import { form, Field } from '@angular/forms/signals';
+import { form, FormField } from '@angular/forms/signals';
@Component({
selector: 'app-root',
templateUrl: './app.html',
styleUrl: './app.css',
- imports: [Field],
+ imports: [FormField],
changeDetection: ChangeDetectionStrategy.OnPush,
})
```
@@ -33,29 +33,29 @@ import { form, Field } from '@angular/forms/signals';
-In your template, add the `[field]` directive to the email input:
+In your template, add the `[formField]` directive to the email input:
```html
-
+
```
The `loginForm.email` expression accesses the email field from your form.
-Add the `[field]` directive to the password input:
+Add the `[formField]` directive to the password input:
```html
-
+
```
-Add the `[field]` directive to the checkbox input:
+Add the `[formField]` directive to the checkbox input:
```html
-
+
```
@@ -74,6 +74,6 @@ Form field values are signals, so the displayed values update automatically as y
-Great work! You've connected your form to the template and displayed the form values. The `[field]` directive handles two-way data binding automatically - as you type, the `loginModel` signal updates, and the displayed values update immediately.
+Great work! You've connected your form to the template and displayed the form values. The `[formField]` directive handles two-way data binding automatically - as you type, the `loginModel` signal updates, and the displayed values update immediately.
Next, you'll learn [how to add validation to your form](/tutorials/signal-forms/3-add-validation)!
diff --git a/adev/src/content/tutorials/signal-forms/steps/2-connect-form-template/answer/src/app/app.html b/adev/src/content/tutorials/signal-forms/steps/2-connect-form-template/answer/src/app/app.html
index 607367d7d86..68608b704b6 100644
--- a/adev/src/content/tutorials/signal-forms/steps/2-connect-form-template/answer/src/app/app.html
+++ b/adev/src/content/tutorials/signal-forms/steps/2-connect-form-template/answer/src/app/app.html
@@ -2,20 +2,20 @@
diff --git a/adev/src/content/tutorials/signal-forms/steps/5-add-submission/src/app/app.ts b/adev/src/content/tutorials/signal-forms/steps/5-add-submission/src/app/app.ts
index b0f3b34b194..7c0197ace99 100644
--- a/adev/src/content/tutorials/signal-forms/steps/5-add-submission/src/app/app.ts
+++ b/adev/src/content/tutorials/signal-forms/steps/5-add-submission/src/app/app.ts
@@ -1,6 +1,6 @@
-import {Component, signal, ChangeDetectionStrategy} from '@angular/core';
+import {ChangeDetectionStrategy, Component, signal} from '@angular/core';
// TODO: Import submit function
-import {form, Field, required, email} from '@angular/forms/signals';
+import {email, form, FormField, required} from '@angular/forms/signals';
interface LoginData {
email: string;
@@ -12,7 +12,7 @@ interface LoginData {
selector: 'app-root',
templateUrl: './app.html',
styleUrl: './app.css',
- imports: [Field],
+ imports: [FormField],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class App {
diff --git a/adev/src/content/tutorials/signal-forms/steps/6-next-steps/README.md b/adev/src/content/tutorials/signal-forms/steps/6-next-steps/README.md
index d3d8d39a55d..86b156c4cbc 100644
--- a/adev/src/content/tutorials/signal-forms/steps/6-next-steps/README.md
+++ b/adev/src/content/tutorials/signal-forms/steps/6-next-steps/README.md
@@ -7,7 +7,7 @@ You've completed the Signal Forms tutorial and built a complete login form from
Throughout this tutorial, you learned the fundamentals of Angular Signal Forms:
1. **Form Models** - Creating type-safe form data with signals and the `form()` function
-2. **Field Binding** - Using the `[field]` directive for two-way data binding and displaying the field with `value()`
+2. **Field Binding** - Using the `[formField]` directive for two-way data binding and displaying the field with `value()`
3. **Validation** - Applying built-in validators (such as `required()`, `email()`) with custom messages
4. **Error Display** - Showing validation errors conditionally based on field state
5. **Form Submission** - Handling form submission with the `submit()` function