From 6ac865112a58e8af2ddd462bf4a56ec11b153704 Mon Sep 17 00:00:00 2001
From: Arcadio Quintero <oidacra@gmail.com>
Date: Wed, 2 Sep 2026 15:44:11 -0400
Subject: [PATCH] translate: update Signal Forms tutorial steps

Apply only the English delta (Angular v22.1) to the Spanish translation,
without retranslating:

- `Field` directive renamed to `FormField`, and `[field]` to `[formField]`
  in prose, step titles and examples
- Drop `changeDetection: ChangeDetectionStrategy.OnPush` from the component
  example in step 2
- Template fences `html` -> `angular-html` where the original changed
- Code formatting aligned with the original (no spaces inside braces,
  single-line `<form>` and `<button>` elements)

The .en.md files already hold the new English since 1b24621 and are unchanged.

Fixes #202
---
 .../steps/1-set-up-form-model/README.md       |  4 +--
 .../steps/2-connect-form-template/README.md   | 31 +++++++++----------
 .../steps/3-add-validation/README.md          | 12 +++----
 .../steps/4-display-errors/README.md          |  8 ++---
 .../steps/5-add-submission/README.md          |  8 ++---
 5 files changed, 30 insertions(+), 33 deletions(-)

diff --git a/adev-es/src/content/tutorials/signal-forms/steps/1-set-up-form-model/README.md b/adev-es/src/content/tutorials/signal-forms/steps/1-set-up-form-model/README.md
index f6093db3..bb83b1f9 100644
--- a/adev-es/src/content/tutorials/signal-forms/steps/1-set-up-form-model/README.md
+++ b/adev-es/src/content/tutorials/signal-forms/steps/1-set-up-form-model/README.md
@@ -36,8 +36,8 @@ Agrega esta interfaz sobre el decorador `@Component`.
 Importa la función `signal` desde `@angular/core` y la función `form` desde `@angular/forms/signals`:
 
 ```ts
-import { Component, signal } from '@angular/core';
-import { form } from '@angular/forms/signals';
+import {Component, signal} from '@angular/core';
+import {form} from '@angular/forms/signals';
 ```
 
 </docs-step>
diff --git a/adev-es/src/content/tutorials/signal-forms/steps/2-connect-form-template/README.md b/adev-es/src/content/tutorials/signal-forms/steps/2-connect-form-template/README.md
index 096fcc29..b8a998cb 100644
--- a/adev-es/src/content/tutorials/signal-forms/steps/2-connect-form-template/README.md
+++ b/adev-es/src/content/tutorials/signal-forms/steps/2-connect-form-template/README.md
@@ -1,11 +1,11 @@
 # Conectar tu formulario a la plantilla
 
-Ahora, necesitas conectar tu formulario a la plantilla usando la directiva `[field]`. Esto crea un enlace bidireccional de datos entre tu modelo de formulario y los elementos de entrada.
+Ahora, necesitas conectar tu formulario a la plantilla usando la directiva `[formField]`. Esto crea un enlace bidireccional de datos entre tu modelo de formulario y los elementos de entrada.
 
 En esta lección, aprenderás cómo:
 
-- Importar la directiva `Field`
-- Usar la directiva `[field]` para enlazar campos del formulario a inputs
+- Importar la directiva `FormField`
+- Usar la directiva `[formField]` para enlazar campos del formulario a inputs
 - Conectar inputs de texto y checkboxes a tu formulario
 - Mostrar los valores de los campos del formulario en la plantilla
 
@@ -15,47 +15,46 @@ En esta lección, aprenderás cómo:
 
 <docs-workflow>
 
-<docs-step title="Importa la directiva Field">
-Importa la directiva `Field` desde `@angular/forms/signals` y agrégala al arreglo imports de tu componente:
+<docs-step title="Importa la directiva FormField">
+Importa la directiva `FormField` desde `@angular/forms/signals` y agrégala al arreglo imports de tu componente:
 
 ```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],
-  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [FormField],
 })
 ```
 
 </docs-step>
 
 <docs-step title="Enlaza el campo email">
-En tu plantilla, agrega la directiva `[field]` al input de email:
+En tu plantilla, agrega la directiva `[formField]` al input de email:
 
 ```html
-<input type="email" [field]="loginForm.email" />
+<input type="email" [formField]="loginForm.email" />
 ```
 
 La expresión `loginForm.email` accede al campo email desde tu formulario.
 </docs-step>
 
 <docs-step title="Enlaza el campo password">
-Agrega la directiva `[field]` al input de password:
+Agrega la directiva `[formField]` al input de password:
 
 ```html
-<input type="password" [field]="loginForm.password" />
+<input type="password" [formField]="loginForm.password" />
 ```
 
 </docs-step>
 
 <docs-step title="Enlaza el campo checkbox">
-Agrega la directiva `[field]` al input checkbox:
+Agrega la directiva `[formField]` al input checkbox:
 
 ```html
-<input type="checkbox" [field]="loginForm.rememberMe" />
+<input type="checkbox" [formField]="loginForm.rememberMe" />
 ```
 
 </docs-step>
@@ -63,7 +62,7 @@ Agrega la directiva `[field]` al input checkbox:
 <docs-step title="Muestra los valores del formulario">
 Debajo del formulario, hay una sección de depuración para mostrar los valores actuales del formulario. Muestra cada valor de campo usando `.value()`:
 
-```html
+```angular-html
 <p>Email: {{ loginForm.email().value() }}</p>
 <p>Password: {{ loginForm.password().value() ? '••••••••' : '(empty)' }}</p>
 <p>Remember me: {{ loginForm.rememberMe().value() ? 'Yes' : 'No' }}</p>
@@ -74,6 +73,6 @@ Los valores de los campos del formulario son signals, por lo que los valores mos
 
 </docs-workflow>
 
-¡Excelente trabajo! Has conectado tu formulario a la plantilla y mostrado los valores del formulario. La directiva `[field]` maneja el enlace bidireccional de datos automáticamente — mientras escribes, el signal `loginModel` se actualiza, y los valores mostrados se actualizan inmediatamente.
+¡Excelente trabajo! Has conectado tu formulario a la plantilla y mostrado los valores del formulario. La directiva `[formField]` maneja el enlace bidireccional de datos automáticamente — mientras escribes, el signal `loginModel` se actualiza, y los valores mostrados se actualizan inmediatamente.
 
 A continuación, aprenderás [cómo agregar validación a tu formulario](/tutorials/signal-forms/3-add-validation)!
diff --git a/adev-es/src/content/tutorials/signal-forms/steps/3-add-validation/README.md b/adev-es/src/content/tutorials/signal-forms/steps/3-add-validation/README.md
index feb9c4de..d948c990 100644
--- a/adev-es/src/content/tutorials/signal-forms/steps/3-add-validation/README.md
+++ b/adev-es/src/content/tutorials/signal-forms/steps/3-add-validation/README.md
@@ -18,7 +18,7 @@ En esta actividad, aprenderás cómo:
 Importa los validadores `required` y `email` desde `@angular/forms/signals`:
 
 ```ts
-import { form, Field, required, email } from '@angular/forms/signals';
+import {form, FormField, required, email} from '@angular/forms/signals';
 ```
 
 </docs-step>
@@ -39,8 +39,8 @@ Dentro de la función de esquema, agrega validación para el campo email. Usa am
 
 ```ts
 loginForm = form(this.loginModel, (fieldPath) => {
-  required(fieldPath.email, { message: 'Email is required' });
-  email(fieldPath.email, { message: 'Enter a valid email address' });
+  required(fieldPath.email, {message: 'Email is required'});
+  email(fieldPath.email, {message: 'Enter a valid email address'});
 });
 ```
 
@@ -52,9 +52,9 @@ Agrega validación para el campo password usando el validador `required()`:
 
 ```ts
 loginForm = form(this.loginModel, (fieldPath) => {
-  required(fieldPath.email, { message: 'Email is required' });
-  email(fieldPath.email, { message: 'Enter a valid email address' });
-  required(fieldPath.password, { message: 'Password is required' });
+  required(fieldPath.email, {message: 'Email is required'});
+  email(fieldPath.email, {message: 'Enter a valid email address'});
+  required(fieldPath.password, {message: 'Password is required'});
 });
 ```
 
diff --git a/adev-es/src/content/tutorials/signal-forms/steps/4-display-errors/README.md b/adev-es/src/content/tutorials/signal-forms/steps/4-display-errors/README.md
index 6c1250e3..e4b240ff 100644
--- a/adev-es/src/content/tutorials/signal-forms/steps/4-display-errors/README.md
+++ b/adev-es/src/content/tutorials/signal-forms/steps/4-display-errors/README.md
@@ -18,10 +18,10 @@ En esta actividad, aprenderás cómo:
 <docs-step title="Agrega visualización de errores para el campo email">
 Debajo del input de email, agrega visualización condicional de errores. Esto solo mostrará errores cuando el campo sea tanto inválido como touched:
 
-```html
+```angular-html
 <label>
   Email
-  <input type="email" [field]="loginForm.email" />
+  <input type="email" [formField]="loginForm.email" />
 </label>
 @if (loginForm.email().invalid() && loginForm.email().touched()) {
   <div class="error">
@@ -38,10 +38,10 @@ La llamada `loginForm.email()` accede al signal de estado del campo. El método
 <docs-step title="Agrega visualización de errores para el campo password">
 Debajo del input de password, agrega el mismo patrón para errores de password:
 
-```html
+```angular-html
 <label>
   Password
-  <input type="password" [field]="loginForm.password" />
+  <input type="password" [formField]="loginForm.password" />
 </label>
 @if (loginForm.password().invalid() && loginForm.password().touched()) {
   <div class="error">
diff --git a/adev-es/src/content/tutorials/signal-forms/steps/5-add-submission/README.md b/adev-es/src/content/tutorials/signal-forms/steps/5-add-submission/README.md
index 26749941..9e5282df 100644
--- a/adev-es/src/content/tutorials/signal-forms/steps/5-add-submission/README.md
+++ b/adev-es/src/content/tutorials/signal-forms/steps/5-add-submission/README.md
@@ -19,7 +19,7 @@ En esta actividad, aprenderás cómo:
 Importa la función `submit` desde `@angular/forms/signals`:
 
 ```ts
-import { form, Field, required, email, submit } from '@angular/forms/signals';
+import {form, FormField, required, email, submit} from '@angular/forms/signals';
 ```
 
 </docs-step>
@@ -45,7 +45,7 @@ La función `submit()` solo ejecuta tu callback asíncrono si el formulario es v
 En tu plantilla, enlaza el método `onSubmit()` al evento submit del formulario:
 
 ```html
-<form (submit)="onSubmit($event)">
+<form (submit)="onSubmit($event)"></form>
 ```
 
 </docs-step>
@@ -54,9 +54,7 @@ En tu plantilla, enlaza el método `onSubmit()` al evento submit del formulario:
 Actualiza el botón de envío para que esté deshabilitado cuando el formulario sea inválido:
 
 ```html
-<button type="submit" [disabled]="loginForm().invalid()">
-  Log in
-</button>
+<button type="submit" [disabled]="loginForm().invalid()">Log in</button>
 ```
 
 Esto previene el envío cuando el formulario tiene errores de validación.