translate: translations form signal forms tutorial

Fixes #168

Author: ricardochl

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)!

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)!

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!
+
+<hr />
+
+<docs-workflow>
+
+<docs-step title="Define the LoginData interface">
+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.
+</docs-step>
+
+<docs-step title="Import signal and form">
+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';
+```
+
+</docs-step>
+
+<docs-step title="Create the form model signal">
+In your component class, create a `loginModel` signal with initial values. Use the `LoginData` interface as the type parameter:
+
+```ts
+loginModel = signal<LoginData>({
+  email: '',
+  password: '',
+  rememberMe: false,
+});
+```
+
+The initial values start as empty strings for text fields and `false` for the checkbox.
+</docs-step>
+
+<docs-step title="Create the form">
+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.
+</docs-step>
+
+</docs-workflow>
+
+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)!

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!
 
 <hr />
 
 <docs-workflow>
 
-<docs-step title="Define the LoginData interface">
-Create a TypeScript interface that defines the structure of your login form data. The form will have:
+<docs-step title="Define la interfaz LoginData">
+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`.
 </docs-step>
 
-<docs-step title="Import signal and form">
-Import the `signal` function from `@angular/core` and the `form` function from `@angular/forms/signals`:
+<docs-step title="Importa signal y form">
+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';
 
 </docs-step>
 
-<docs-step title="Create the form model signal">
-In your component class, create a `loginModel` signal with initial values. Use the `LoginData` interface as the type parameter:
+<docs-step title="Crea el signal del modelo del formulario">
+En tu clase de componente, crea un signal `loginModel` con valores iniciales. Usa la interfaz `LoginData` como parámetro de tipo:
 
 ```ts
 loginModel = signal<LoginData>({
@@ -53,21 +53,21 @@ loginModel = signal<LoginData>({
 });
 ```
 
-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.
 </docs-step>
 
-<docs-step title="Create the form">
-Now create the form by passing your model signal to the `form()` function:
+<docs-step title="Crea el formulario">
+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.
 </docs-step>
 
 </docs-workflow>
 
-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)!

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!
+
+<hr />
+
+<docs-workflow>
+
+<docs-step title="Import the Field directive">
+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,
+})
+```
+
+</docs-step>
+
+<docs-step title="Bind the email field">
+In your template, add the `[field]` directive to the email input:
+
+```html
+<input type="email" [field]="loginForm.email" />
+```
+
+The `loginForm.email` expression accesses the email field from your form.
+</docs-step>
+
+<docs-step title="Bind the password field">
+Add the `[field]` directive to the password input:
+
+```html
+<input type="password" [field]="loginForm.password" />
+```
+
+</docs-step>
+
+<docs-step title="Bind the checkbox field">
+Add the `[field]` directive to the checkbox input:
+
+```html
+<input type="checkbox" [field]="loginForm.rememberMe" />
+```
+
+</docs-step>
+
+<docs-step title="Display the form values">
+Below the form, there's a debug section to show current form values. Display each field value using `.value()`:
+
+```html
+<p>Email: {{ loginForm.email().value() }}</p>
+<p>Password: {{ loginForm.password().value() ? '••••••••' : '(empty)' }}</p>
+<p>Remember me: {{ loginForm.rememberMe().value() ? 'Yes' : 'No' }}</p>
+```
+
+Form field values are signals, so the displayed values update automatically as you type.
+</docs-step>
+
+</docs-workflow>
+
+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)!