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

Email: {{ loginForm.email().value() }}

Password: {{ loginForm.password().value() ? '••••••••' : '(empty)' }}

Remember me: {{ loginForm.rememberMe().value() ? 'Yes' : 'No' }}

@@ -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.