From 2bc7bd1145a958c0f790ab7eafd22c1a505308a5 Mon Sep 17 00:00:00 2001 From: Ricardo Chavarria Date: Sun, 31 May 2026 23:11:16 -0600 Subject: [PATCH] translate: translations form signal forms tutorial Fixes #168 --- .../tutorials/signal-forms/intro/README.en.md | 24 ++++++ .../tutorials/signal-forms/intro/README.md | 30 +++---- .../steps/1-set-up-form-model/README.en.md | 73 +++++++++++++++++ .../steps/1-set-up-form-model/README.md | 46 +++++------ .../2-connect-form-template/README.en.md | 79 +++++++++++++++++++ .../steps/2-connect-form-template/README.md | 44 +++++------ .../steps/3-add-validation/README.en.md | 67 ++++++++++++++++ .../steps/3-add-validation/README.md | 38 ++++----- .../steps/4-display-errors/README.en.md | 61 ++++++++++++++ .../steps/4-display-errors/README.md | 30 +++---- .../steps/5-add-submission/README.en.md | 69 ++++++++++++++++ .../steps/5-add-submission/README.md | 42 +++++----- .../steps/6-next-steps/README.en.md | 32 ++++++++ .../signal-forms/steps/6-next-steps/README.md | 42 +++++----- 14 files changed, 541 insertions(+), 136 deletions(-) create mode 100644 adev-es/src/content/tutorials/signal-forms/intro/README.en.md create mode 100644 adev-es/src/content/tutorials/signal-forms/steps/1-set-up-form-model/README.en.md create mode 100644 adev-es/src/content/tutorials/signal-forms/steps/2-connect-form-template/README.en.md create mode 100644 adev-es/src/content/tutorials/signal-forms/steps/3-add-validation/README.en.md create mode 100644 adev-es/src/content/tutorials/signal-forms/steps/4-display-errors/README.en.md create mode 100644 adev-es/src/content/tutorials/signal-forms/steps/5-add-submission/README.en.md create mode 100644 adev-es/src/content/tutorials/signal-forms/steps/6-next-steps/README.en.md diff --git a/adev-es/src/content/tutorials/signal-forms/intro/README.en.md b/adev-es/src/content/tutorials/signal-forms/intro/README.en.md new file mode 100644 index 0000000..943de65 --- /dev/null +++ b/adev-es/src/content/tutorials/signal-forms/intro/README.en.md @@ -0,0 +1,24 @@ +# Learn Angular Signal Forms + +This interactive tutorial will teach you how to build reactive forms using Angular's experimental Signal Forms API. + +IMPORTANT: Signal Forms is currently [experimental](reference/releases#experimental). The API may change before stabilizing. Check the [official documentation](guide/forms/signal-forms) for the latest updates. + +## How to use this tutorial + +This tutorial assumes you understand Angular's core concepts and have basic familiarity with signals. If you're new to Angular, read our [essentials guide](/essentials). If you're new to signals, complete the [signals tutorial](/tutorials/signals) first. + +Each step represents a concept in Signal Forms. You'll build a complete login form from scratch, learning the fundamentals step by step. + +**Your learning path:** + +1. Set up the form model with TypeScript and signals +2. Connect the form to your template +3. Add validation rules +4. Display validation errors to users +5. Handle form submission +6. Explore advanced topics and next steps + +If you get stuck, click "Reveal answer" at the top. + +Alright, let's [get started](/tutorials/signal-forms/1-set-up-form-model)! diff --git a/adev-es/src/content/tutorials/signal-forms/intro/README.md b/adev-es/src/content/tutorials/signal-forms/intro/README.md index 943de65..9035f60 100644 --- a/adev-es/src/content/tutorials/signal-forms/intro/README.md +++ b/adev-es/src/content/tutorials/signal-forms/intro/README.md @@ -1,24 +1,24 @@ -# Learn Angular Signal Forms +# Aprende sobre Signal Forms en Angular -This interactive tutorial will teach you how to build reactive forms using Angular's experimental Signal Forms API. +Este tutorial interactivo te enseñará cómo construir formularios reactivos usando la API experimental Signal Forms de Angular. -IMPORTANT: Signal Forms is currently [experimental](reference/releases#experimental). The API may change before stabilizing. Check the [official documentation](guide/forms/signal-forms) for the latest updates. +IMPORTANTE: Signal Forms es actualmente [experimental](reference/releases#experimental). La API puede cambiar antes de estabilizarse. Consulta la [documentación oficial](guide/forms/signal-forms) para las últimas actualizaciones. -## How to use this tutorial +## Cómo usar este tutorial -This tutorial assumes you understand Angular's core concepts and have basic familiarity with signals. If you're new to Angular, read our [essentials guide](/essentials). If you're new to signals, complete the [signals tutorial](/tutorials/signals) first. +Este tutorial asume que entiendes los conceptos principales de Angular y tienes familiaridad básica con signals. Si eres nuevo en Angular, lee nuestra [guía esencial](/essentials). Si eres nuevo en signals, completa primero el [tutorial de signals](/tutorials/signals). -Each step represents a concept in Signal Forms. You'll build a complete login form from scratch, learning the fundamentals step by step. +Cada paso representa un concepto en Signal Forms. Construirás un formulario de inicio de sesión completo desde cero, aprendiendo los fundamentos paso a paso. -**Your learning path:** +**Tu ruta de aprendizaje:** -1. Set up the form model with TypeScript and signals -2. Connect the form to your template -3. Add validation rules -4. Display validation errors to users -5. Handle form submission -6. Explore advanced topics and next steps +1. Configurar el modelo del formulario con TypeScript y signals +2. Conectar el formulario a tu plantilla +3. Agregar reglas de validación +4. Mostrar errores de validación a los usuarios +5. Manejar el envío del formulario +6. Explorar temas avanzados y próximos pasos -If you get stuck, click "Reveal answer" at the top. +Si te quedas atascado, haz clic en "Reveal answer" (Mostrar respuesta) en la parte superior. -Alright, let's [get started](/tutorials/signal-forms/1-set-up-form-model)! +Muy bien, ¡[comencemos](/tutorials/signal-forms/1-set-up-form-model)! diff --git a/adev-es/src/content/tutorials/signal-forms/steps/1-set-up-form-model/README.en.md b/adev-es/src/content/tutorials/signal-forms/steps/1-set-up-form-model/README.en.md new file mode 100644 index 0000000..68988c3 --- /dev/null +++ b/adev-es/src/content/tutorials/signal-forms/steps/1-set-up-form-model/README.en.md @@ -0,0 +1,73 @@ +# Set up the form model + +Every Signal Form starts with a form data model - a signal that defines the shape of your data, and stores your form data. + +In this lesson, you'll learn how to: + +- Define a TypeScript interface for your form data +- Create a signal to hold form values +- Use the `form()` function to create a Signal Form + +Let's build the foundation for our login form! + +
+ + + + +Create a TypeScript interface that defines the structure of your login form data. The form will have: + +- An `email` field (string) +- A `password` field (string) +- A `rememberMe` field (boolean) + +```ts +interface LoginData { + email: string; + password: string; + rememberMe: boolean; +} +``` + +Add this interface above the `@Component` decorator. + + + +Import the `signal` function from `@angular/core` and the `form` function from `@angular/forms/signals`: + +```ts +import { Component, signal } from '@angular/core'; +import { form } from '@angular/forms/signals'; +``` + + + + +In your component class, create a `loginModel` signal with initial values. Use the `LoginData` interface as the type parameter: + +```ts +loginModel = signal({ + email: '', + password: '', + rememberMe: false, +}); +``` + +The initial values start as empty strings for text fields and `false` for the checkbox. + + + +Now create the form by passing your model signal to the `form()` function: + +```ts +loginForm = form(this.loginModel); +``` + +The `form()` function creates a form from your model, giving you access to field state and validation. + + + + +Excellent! You've set up your form model. The `loginModel` signal holds your form data, and the `loginForm` provides access to each field with type safety. + +Next, you'll learn [how to connect your form to the template](/tutorials/signal-forms/2-connect-form-template)! 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 68988c3..f6093db 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 @@ -1,25 +1,25 @@ -# Set up the form model +# Configurar el modelo del formulario -Every Signal Form starts with a form data model - a signal that defines the shape of your data, and stores your form data. +Todo Signal Form comienza con un modelo de datos del formulario — un signal que define la forma de tus datos y almacena los datos de tu formulario. -In this lesson, you'll learn how to: +En esta lección, aprenderás cómo: -- Define a TypeScript interface for your form data -- Create a signal to hold form values -- Use the `form()` function to create a Signal Form +- Definir una interfaz TypeScript para los datos de tu formulario +- Crear un signal para mantener los valores del formulario +- Usar la función `form()` para crear un Signal Form -Let's build the foundation for our login form! +¡Construyamos la base para nuestro formulario de inicio de sesión!
- -Create a TypeScript interface that defines the structure of your login form data. The form will have: + +Crea una interfaz TypeScript que defina la estructura de los datos de tu formulario de inicio de sesión. El formulario tendrá: -- An `email` field (string) -- A `password` field (string) -- A `rememberMe` field (boolean) +- Un campo `email` (string) +- Un campo `password` (string) +- Un campo `rememberMe` (boolean) ```ts interface LoginData { @@ -29,11 +29,11 @@ interface LoginData { } ``` -Add this interface above the `@Component` decorator. +Agrega esta interfaz sobre el decorador `@Component`. - -Import the `signal` function from `@angular/core` and the `form` function from `@angular/forms/signals`: + +Importa la función `signal` desde `@angular/core` y la función `form` desde `@angular/forms/signals`: ```ts import { Component, signal } from '@angular/core'; @@ -42,8 +42,8 @@ import { form } from '@angular/forms/signals'; - -In your component class, create a `loginModel` signal with initial values. Use the `LoginData` interface as the type parameter: + +En tu clase de componente, crea un signal `loginModel` con valores iniciales. Usa la interfaz `LoginData` como parámetro de tipo: ```ts loginModel = signal({ @@ -53,21 +53,21 @@ loginModel = signal({ }); ``` -The initial values start as empty strings for text fields and `false` for the checkbox. +Los valores iniciales comienzan como strings vacíos para los campos de texto y `false` para el checkbox. - -Now create the form by passing your model signal to the `form()` function: + +Ahora crea el formulario pasando tu signal modelo a la función `form()`: ```ts loginForm = form(this.loginModel); ``` -The `form()` function creates a form from your model, giving you access to field state and validation. +La función `form()` crea un formulario a partir de tu modelo, dándote acceso al estado del campo y la validación. -Excellent! You've set up your form model. The `loginModel` signal holds your form data, and the `loginForm` provides access to each field with type safety. +¡Excelente! Has configurado tu modelo de formulario. El signal `loginModel` mantiene los datos de tu formulario, y `loginForm` proporciona acceso a cada campo con seguridad de tipos. -Next, you'll learn [how to connect your form to the template](/tutorials/signal-forms/2-connect-form-template)! +A continuación, aprenderás [cómo conectar tu formulario a la plantilla](/tutorials/signal-forms/2-connect-form-template)! diff --git a/adev-es/src/content/tutorials/signal-forms/steps/2-connect-form-template/README.en.md b/adev-es/src/content/tutorials/signal-forms/steps/2-connect-form-template/README.en.md new file mode 100644 index 0000000..8191053 --- /dev/null +++ b/adev-es/src/content/tutorials/signal-forms/steps/2-connect-form-template/README.en.md @@ -0,0 +1,79 @@ +# 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. + +In this lesson, you'll learn how to: + +- Import the `Field` directive +- Use the `[field]` directive to bind form fields to inputs +- Connect text inputs and checkboxes to your form +- Display form field values in the template + +Let's wire up the template! + +
+ + + + +Import the `Field` directive from `@angular/forms/signals` and add it to your component's imports array: + +```ts +import { form, Field } from '@angular/forms/signals'; + +@Component({ + selector: 'app-root', + templateUrl: './app.html', + styleUrl: './app.css', + imports: [Field], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +``` + + + + +In your template, add the `[field]` 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: + +```html + +``` + + + + +Add the `[field]` directive to the checkbox input: + +```html + +``` + + + + +Below the form, there's a debug section to show current form values. Display each field value using `.value()`: + +```html +

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

+

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

+

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

+``` + +Form field values are signals, so the displayed values update automatically as you type. + + + + +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. + +Next, you'll learn [how to add validation to your form](/tutorials/signal-forms/3-add-validation)! 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 8191053..096fcc2 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,22 +1,22 @@ -# Connect your form to the template +# Conectar tu formulario a la plantilla -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. +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. -In this lesson, you'll learn how to: +En esta lección, aprenderás cómo: -- Import the `Field` directive -- Use the `[field]` directive to bind form fields to inputs -- Connect text inputs and checkboxes to your form -- Display form field values in the template +- Importar la directiva `Field` +- Usar la directiva `[field]` 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 -Let's wire up the template! +¡Conectemos la plantilla!
- -Import the `Field` directive from `@angular/forms/signals` and add it to your component's imports array: + +Importa la directiva `Field` desde `@angular/forms/signals` y agrégala al arreglo imports de tu componente: ```ts import { form, Field } from '@angular/forms/signals'; @@ -32,18 +32,18 @@ import { form, Field } from '@angular/forms/signals'; - -In your template, add the `[field]` directive to the email input: + +En tu plantilla, agrega la directiva `[field]` al input de email: ```html ``` -The `loginForm.email` expression accesses the email field from your form. +La expresión `loginForm.email` accede al campo email desde tu formulario. - -Add the `[field]` directive to the password input: + +Agrega la directiva `[field]` al input de password: ```html @@ -51,8 +51,8 @@ Add the `[field]` directive to the password input: - -Add the `[field]` directive to the checkbox input: + +Agrega la directiva `[field]` al input checkbox: ```html @@ -60,8 +60,8 @@ Add the `[field]` directive to the checkbox input: - -Below the form, there's a debug section to show current form values. Display each field value using `.value()`: + +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

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

@@ -69,11 +69,11 @@ Below the form, there's a debug section to show current form values. Display eac

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

``` -Form field values are signals, so the displayed values update automatically as you type. +Los valores de los campos del formulario son signals, por lo que los valores mostrados se actualizan automáticamente mientras escribes. -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. +¡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. -Next, you'll learn [how to add validation to your form](/tutorials/signal-forms/3-add-validation)! +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.en.md b/adev-es/src/content/tutorials/signal-forms/steps/3-add-validation/README.en.md new file mode 100644 index 0000000..bc5f431 --- /dev/null +++ b/adev-es/src/content/tutorials/signal-forms/steps/3-add-validation/README.en.md @@ -0,0 +1,67 @@ +# Add validation to your form + +Adding validation to your form is critical to ensure users enter valid data. Signal Forms uses validators in a schema function that you pass to the `form()` function. + +In this activity, you'll learn how to: + +- Import built-in validators +- Define a schema function for your form +- Apply validators to specific fields with custom error messages + +Let's add validation! + +
+ + + + +Import the `required` and `email` validators from `@angular/forms/signals`: + +```ts +import { form, Field, required, email } from '@angular/forms/signals'; +``` + + + + +Update your `form()` call to include a schema function as the second parameter. The schema function receives a `fieldPath` parameter that lets you access each field: + +```ts +loginForm = form(this.loginModel, (fieldPath) => { + // Validators will go here +}); +``` + + + + +Inside the schema function, add validation for the email field. Use both `required()` and `email()` validators: + +```ts +loginForm = form(this.loginModel, (fieldPath) => { + required(fieldPath.email, { message: 'Email is required' }); + email(fieldPath.email, { message: 'Enter a valid email address' }); +}); +``` + +The `message` option provides custom error messages for users. + + + +Add validation for the password field using the `required()` validator: + +```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' }); +}); +``` + + + + + +Perfect! You've added validation to your form. The validators run automatically as users interact with the form. When validation fails, the field's state will reflect the errors. + +Next, you'll learn [how to display validation errors in the template](/tutorials/signal-forms/4-display-errors)! 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 bc5f431..feb9c4d 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 @@ -1,21 +1,21 @@ -# Add validation to your form +# Agregar validación a tu formulario -Adding validation to your form is critical to ensure users enter valid data. Signal Forms uses validators in a schema function that you pass to the `form()` function. +Agregar validación a tu formulario es fundamental para asegurar que los usuarios ingresen datos válidos. Signal Forms usa validadores en una función de esquema que pasas a la función `form()`. -In this activity, you'll learn how to: +En esta actividad, aprenderás cómo: -- Import built-in validators -- Define a schema function for your form -- Apply validators to specific fields with custom error messages +- Importar validadores integrados +- Definir una función de esquema para tu formulario +- Aplicar validadores a campos específicos con mensajes de error personalizados -Let's add validation! +¡Agreguemos validación!
- -Import the `required` and `email` validators from `@angular/forms/signals`: + +Importa los validadores `required` y `email` desde `@angular/forms/signals`: ```ts import { form, Field, required, email } from '@angular/forms/signals'; @@ -23,19 +23,19 @@ import { form, Field, required, email } from '@angular/forms/signals'; - -Update your `form()` call to include a schema function as the second parameter. The schema function receives a `fieldPath` parameter that lets you access each field: + +Actualiza tu llamada a `form()` para incluir una función de esquema como segundo parámetro. La función de esquema recibe un parámetro `fieldPath` que te permite acceder a cada campo: ```ts loginForm = form(this.loginModel, (fieldPath) => { - // Validators will go here + // Los validadores irán aquí }); ``` - -Inside the schema function, add validation for the email field. Use both `required()` and `email()` validators: + +Dentro de la función de esquema, agrega validación para el campo email. Usa ambos validadores `required()` y `email()`: ```ts loginForm = form(this.loginModel, (fieldPath) => { @@ -44,11 +44,11 @@ loginForm = form(this.loginModel, (fieldPath) => { }); ``` -The `message` option provides custom error messages for users. +La opción `message` proporciona mensajes de error personalizados para los usuarios. - -Add validation for the password field using the `required()` validator: + +Agrega validación para el campo password usando el validador `required()`: ```ts loginForm = form(this.loginModel, (fieldPath) => { @@ -62,6 +62,6 @@ loginForm = form(this.loginModel, (fieldPath) => { -Perfect! You've added validation to your form. The validators run automatically as users interact with the form. When validation fails, the field's state will reflect the errors. +¡Perfecto! Has agregado validación a tu formulario. Los validadores se ejecutan automáticamente mientras los usuarios interactúan con el formulario. Cuando la validación falla, el estado del campo reflejará los errores. -Next, you'll learn [how to display validation errors in the template](/tutorials/signal-forms/4-display-errors)! +A continuación, aprenderás [cómo mostrar errores de validación en la plantilla](/tutorials/signal-forms/4-display-errors)! diff --git a/adev-es/src/content/tutorials/signal-forms/steps/4-display-errors/README.en.md b/adev-es/src/content/tutorials/signal-forms/steps/4-display-errors/README.en.md new file mode 100644 index 0000000..9b278df --- /dev/null +++ b/adev-es/src/content/tutorials/signal-forms/steps/4-display-errors/README.en.md @@ -0,0 +1,61 @@ +# Display validation errors + +Now that you're able to validate the form, it's important to show validation errors to users. + +In this activity, you'll learn how to: + +- Access field state with validation signals +- Use `@if` to conditionally display errors +- Loop through errors with `@for` +- Show errors only after user interaction + +Let's display validation feedback! + +
+ + + + +Below the email input, add conditional error display. This will only show errors when the field is both invalid and touched: + +```html + +@if (loginForm.email().invalid() && loginForm.email().touched()) { +
+ @for (error of loginForm.email().errors(); track error.kind) { + {{ error.message }} + } +
+} +``` + +The `loginForm.email()` call accesses the field's state signal. The `invalid()` method returns `true` when validation fails, `touched()` returns `true` after the user has interacted with the field, and `errors()` provides an array of validation errors with their custom messages. + + + +Below the password input, add the same pattern for password errors: + +```html + +@if (loginForm.password().invalid() && loginForm.password().touched()) { +
+ @for (error of loginForm.password().errors(); track error.kind) { + {{ error.message }} + } +
+} +``` + + + + + +Excellent! You've added error display to your form. The errors appear only after users interact with a field, providing helpful feedback without being intrusive. + +Next, you'll learn [how to handle form submission](/tutorials/signal-forms/5-add-submission)! 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 9b278df..6c1250e 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 @@ -1,22 +1,22 @@ -# Display validation errors +# Mostrar errores de validación -Now that you're able to validate the form, it's important to show validation errors to users. +Ahora que puedes validar el formulario, es importante mostrar los errores de validación a los usuarios. -In this activity, you'll learn how to: +En esta actividad, aprenderás cómo: -- Access field state with validation signals -- Use `@if` to conditionally display errors -- Loop through errors with `@for` -- Show errors only after user interaction +- Acceder al estado del campo con signals de validación +- Usar `@if` para mostrar errores condicionalmente +- Iterar sobre errores con `@for` +- Mostrar errores solo después de la interacción del usuario -Let's display validation feedback! +¡Mostremos comentarios de validación!
- -Below the email input, add conditional error display. This will only show errors when the field is both invalid and touched: + +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 - -Below the password input, add the same pattern for password errors: + +Debajo del input de password, agrega el mismo patrón para errores de password: ```html -Excellent! You've added error display to your form. The errors appear only after users interact with a field, providing helpful feedback without being intrusive. +¡Excelente! Has agregado visualización de errores a tu formulario. Los errores aparecen solo después de que los usuarios interactúan con un campo, proporcionando comentarios útiles sin ser intrusivos. -Next, you'll learn [how to handle form submission](/tutorials/signal-forms/5-add-submission)! +A continuación, aprenderás [cómo manejar el envío del formulario](/tutorials/signal-forms/5-add-submission)! diff --git a/adev-es/src/content/tutorials/signal-forms/steps/5-add-submission/README.en.md b/adev-es/src/content/tutorials/signal-forms/steps/5-add-submission/README.en.md new file mode 100644 index 0000000..783b73a --- /dev/null +++ b/adev-es/src/content/tutorials/signal-forms/steps/5-add-submission/README.en.md @@ -0,0 +1,69 @@ +# Add form submission + +Finally, let's learn how to handle form submission. You'll learn how to use the `submit()` function to run async operations when the form is valid, and disable the submit button when the form has errors. + +In this activity, you'll learn how to: + +- Import the `submit()` function +- Create a submission handler method +- Use `submit()` to run logic only when valid +- Disable the submit button based on form state + +Let's complete the form! + +
+ + + + +Import the `submit` function from `@angular/forms/signals`: + +```ts +import { form, Field, required, email, submit } from '@angular/forms/signals'; +``` + + + + +In your component class, add an `onSubmit()` method that handles form submission: + +```ts +onSubmit(event: Event) { + event.preventDefault(); + submit(this.loginForm, async () => { + const credentials = this.loginModel(); + console.log('Logging in with:', credentials); + // Add your login logic here + }); +} +``` + +The `submit()` function only runs your async callback if the form is valid. It also handles the form's submission state automatically. + + + +In your template, bind the `onSubmit()` method to the form's submit event: + +```html +
+``` + + + + +Update the submit button to be disabled when the form is invalid: + +```html + +``` + +This prevents submission when the form has validation errors. + + + + +Congratulations! You've built a complete login form with Signal Forms. + +Ready to see what you've learned and explore advanced topics? Continue to [the next steps](/tutorials/signal-forms/6-next-steps)! 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 783b73a..2674994 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 @@ -1,22 +1,22 @@ -# Add form submission +# Agregar envío de formulario -Finally, let's learn how to handle form submission. You'll learn how to use the `submit()` function to run async operations when the form is valid, and disable the submit button when the form has errors. +Finalmente, aprendamos cómo manejar el envío del formulario. Aprenderás cómo usar la función `submit()` para ejecutar operaciones asíncronas cuando el formulario es válido, y deshabilitar el botón de envío cuando el formulario tiene errores. -In this activity, you'll learn how to: +En esta actividad, aprenderás cómo: -- Import the `submit()` function -- Create a submission handler method -- Use `submit()` to run logic only when valid -- Disable the submit button based on form state +- Importar la función `submit()` +- Crear un método manejador de envío +- Usar `submit()` para ejecutar lógica solo cuando es válido +- Deshabilitar el botón de envío basado en el estado del formulario -Let's complete the form! +¡Completemos el formulario!
- -Import the `submit` function from `@angular/forms/signals`: + +Importa la función `submit` desde `@angular/forms/signals`: ```ts import { form, Field, required, email, submit } from '@angular/forms/signals'; @@ -24,8 +24,8 @@ import { form, Field, required, email, submit } from '@angular/forms/signals'; - -In your component class, add an `onSubmit()` method that handles form submission: + +En tu clase de componente, agrega un método `onSubmit()` que maneje el envío del formulario: ```ts onSubmit(event: Event) { @@ -33,16 +33,16 @@ onSubmit(event: Event) { submit(this.loginForm, async () => { const credentials = this.loginModel(); console.log('Logging in with:', credentials); - // Add your login logic here + // Agrega tu lógica de inicio de sesión aquí }); } ``` -The `submit()` function only runs your async callback if the form is valid. It also handles the form's submission state automatically. +La función `submit()` solo ejecuta tu callback asíncrono si el formulario es válido. También maneja el estado de envío del formulario automáticamente. - -In your template, bind the `onSubmit()` method to the form's submit event: + +En tu plantilla, enlaza el método `onSubmit()` al evento submit del formulario: ```html @@ -50,8 +50,8 @@ In your template, bind the `onSubmit()` method to the form's submit event: - -Update the submit button to be disabled when the form is invalid: + +Actualiza el botón de envío para que esté deshabilitado cuando el formulario sea inválido: ```html ``` -This prevents submission when the form has validation errors. +Esto previene el envío cuando el formulario tiene errores de validación. -Congratulations! You've built a complete login form with Signal Forms. +¡Felicidades! Has construido un formulario de inicio de sesión completo con Signal Forms. -Ready to see what you've learned and explore advanced topics? Continue to [the next steps](/tutorials/signal-forms/6-next-steps)! +¿Listo para ver lo que has aprendido y explorar temas avanzados? Continúa a [los siguientes pasos](/tutorials/signal-forms/6-next-steps)! diff --git a/adev-es/src/content/tutorials/signal-forms/steps/6-next-steps/README.en.md b/adev-es/src/content/tutorials/signal-forms/steps/6-next-steps/README.en.md new file mode 100644 index 0000000..d50c4c2 --- /dev/null +++ b/adev-es/src/content/tutorials/signal-forms/steps/6-next-steps/README.en.md @@ -0,0 +1,32 @@ +# Congratulations! + +You've completed the Signal Forms tutorial and built a complete login form from scratch! + +## What you learned + +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()` +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 + +## Next steps + +Ready to learn more? Here are recommended next steps: + +### Explore the documentation + +- **[Signal Forms Overview](guide/forms/signals/overview)** - Introduction to Signal Forms and when to use them +- **[Form Models Guide](guide/forms/signals/models)** - Deep dive into form models and data management + + + +## Keep learning + +Remember: Signal Forms is experimental, so check the [official documentation](guide/forms/signal-forms) for updates to the API. + +Happy coding! diff --git a/adev-es/src/content/tutorials/signal-forms/steps/6-next-steps/README.md b/adev-es/src/content/tutorials/signal-forms/steps/6-next-steps/README.md index d50c4c2..5e94f9a 100644 --- a/adev-es/src/content/tutorials/signal-forms/steps/6-next-steps/README.md +++ b/adev-es/src/content/tutorials/signal-forms/steps/6-next-steps/README.md @@ -1,32 +1,32 @@ -# Congratulations! +# ¡Felicidades! -You've completed the Signal Forms tutorial and built a complete login form from scratch! +Has completado el tutorial de Signal Forms y has construido un formulario de inicio de sesión completo desde cero. -## What you learned +## Lo que aprendiste -Throughout this tutorial, you learned the fundamentals of Angular Signal Forms: +A lo largo de este tutorial, aprendiste los fundamentos de Signal Forms de Angular: -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()` -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 +1. **Modelos de formulario** - Crear datos de formulario con seguridad de tipos usando signals y la función `form()` +2. **Enlace de campos** - Usar la directiva `[field]` para enlace bidireccional de datos y mostrar el campo con `value()` +3. **Validación** - Aplicar validadores integrados (como `required()`, `email()`) con mensajes personalizados +4. **Visualización de errores** - Mostrar errores de validación condicionalmente basado en el estado del campo +5. **Envío de formulario** - Manejar el envío del formulario con la función `submit()` -## Next steps +## Próximos pasos -Ready to learn more? Here are recommended next steps: +¿Listo para aprender más? Aquí hay próximos pasos recomendados: -### Explore the documentation +### Explora la documentación -- **[Signal Forms Overview](guide/forms/signals/overview)** - Introduction to Signal Forms and when to use them -- **[Form Models Guide](guide/forms/signals/models)** - Deep dive into form models and data management - - +- **[Descripción general de Signal Forms](guide/forms/signals/overview)** - Introducción a Signal Forms y cuándo usarlos +- **[Guía de modelos de formulario](guide/forms/signals/models)** - Inmersión profunda en modelos de formulario y gestión de datos + + -## Keep learning +## Sigue aprendiendo -Remember: Signal Forms is experimental, so check the [official documentation](guide/forms/signal-forms) for updates to the API. +Recuerda: Signal Forms es experimental, así que consulta la [documentación oficial](guide/forms/signal-forms) para actualizaciones de la API. -Happy coding! +¡Feliz codificación!