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';
```
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:
-
-Importa la directiva `Field` desde `@angular/forms/signals` y agrégala al arreglo imports de tu componente:
+
+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],
})
```
-En tu plantilla, agrega la directiva `[field]` al input de email:
+En tu plantilla, agrega la directiva `[formField]` al input de email:
```html
-
+
```
La expresión `loginForm.email` accede al campo email desde tu formulario.
-Agrega la directiva `[field]` al input de password:
+Agrega la directiva `[formField]` al input de password:
```html
-
+
```
-Agrega la directiva `[field]` al input checkbox:
+Agrega la directiva `[formField]` al input checkbox:
```html
-
+
```
@@ -63,7 +62,7 @@ Agrega la directiva `[field]` al input checkbox:
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
@@ -74,6 +73,6 @@ Los valores de los campos del formulario son signals, por lo que los valores mos
-¡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';
```
@@ -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:
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
@if (loginForm.email().invalid() && loginForm.email().touched()) {
@@ -38,10 +38,10 @@ La llamada `loginForm.email()` accede al signal de estado del campo. El método
Debajo del input de password, agrega el mismo patrón para errores de password:
-```html
+```angular-html
@if (loginForm.password().invalid() && loginForm.password().touched()) {
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';
```
@@ -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
-
```
@@ -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
-
+
```
Esto previene el envío cuando el formulario tiene errores de validación.