diff --git a/adev-ja/src/content/tutorials/signal-forms/intro/README.en.md b/adev-ja/src/content/tutorials/signal-forms/intro/README.en.md
new file mode 100644
index 0000000000..943de65bbf
--- /dev/null
+++ b/adev-ja/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-ja/src/content/tutorials/signal-forms/intro/README.md b/adev-ja/src/content/tutorials/signal-forms/intro/README.md
index 943de65bbf..d0a66f9ca4 100644
--- a/adev-ja/src/content/tutorials/signal-forms/intro/README.md
+++ b/adev-ja/src/content/tutorials/signal-forms/intro/README.md
@@ -1,24 +1,24 @@
-# Learn Angular Signal Forms
+# Angularシグナルフォームを学ぶ
-This interactive tutorial will teach you how to build reactive forms using Angular's experimental Signal Forms API.
+このインタラクティブなチュートリアルでは、Angularの実験的なシグナルフォーム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.
+IMPORTANT: シグナルフォームは現在[実験的](reference/releases#experimental)です。安定化する前にAPIが変更される可能性があります。最新の更新については[公式ドキュメント](guide/forms/signal-forms)を確認してください。
-## How to use this tutorial
+## このチュートリアルの使い方 {#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.
+このチュートリアルは、Angularのコア概念を理解しており、シグナルの基本的な知識があることを前提としています。Angularが初めての場合は、[基本ガイド](/essentials)を読んでください。シグナルが初めての場合は、まず[シグナルチュートリアル](/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.
+各ステップはシグナルフォームのコンセプトを表しています。ゼロから完全なログインフォームを構築し、基礎を段階的に学びます。
-**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
+1. TypeScriptとシグナルを使用してフォームモデルを設定
+2. フォームをテンプレートに接続
+3. バリデーションルールを追加
+4. バリデーションエラーをユーザーに表示
+5. フォーム送信を処理
+6. 高度なトピックと次のステップを探索
-If you get stuck, click "Reveal answer" at the top.
+詰まった場合は、上部の「答えを表示」をクリックしてください。
-Alright, let's [get started](/tutorials/signal-forms/1-set-up-form-model)!
+それでは、[始めましょう](/tutorials/signal-forms/1-set-up-form-model)!
diff --git a/adev-ja/src/content/tutorials/signal-forms/intro/config.en.json b/adev-ja/src/content/tutorials/signal-forms/intro/config.en.json
new file mode 100644
index 0000000000..e429346e27
--- /dev/null
+++ b/adev-ja/src/content/tutorials/signal-forms/intro/config.en.json
@@ -0,0 +1,6 @@
+{
+ "title": "Learn Angular Signal Forms",
+ "type": "editor",
+ "nextTutorial": "signals",
+ "openFiles": ["src/app/app.ts", "src/app/app.html", "src/app/app.css"]
+}
diff --git a/adev-ja/src/content/tutorials/signal-forms/intro/config.json b/adev-ja/src/content/tutorials/signal-forms/intro/config.json
index e429346e27..67d4b11056 100644
--- a/adev-ja/src/content/tutorials/signal-forms/intro/config.json
+++ b/adev-ja/src/content/tutorials/signal-forms/intro/config.json
@@ -1,5 +1,5 @@
{
- "title": "Learn Angular Signal Forms",
+ "title": "Angularシグナルフォームを学ぶ",
"type": "editor",
"nextTutorial": "signals",
"openFiles": ["src/app/app.ts", "src/app/app.html", "src/app/app.css"]
diff --git a/adev-ja/src/content/tutorials/signal-forms/steps/1-set-up-form-model/README.en.md b/adev-ja/src/content/tutorials/signal-forms/steps/1-set-up-form-model/README.en.md
new file mode 100644
index 0000000000..68988c328f
--- /dev/null
+++ b/adev-ja/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-ja/src/content/tutorials/signal-forms/steps/1-set-up-form-model/README.md b/adev-ja/src/content/tutorials/signal-forms/steps/1-set-up-form-model/README.md
index 68988c328f..4d2055225c 100644
--- a/adev-ja/src/content/tutorials/signal-forms/steps/1-set-up-form-model/README.md
+++ b/adev-ja/src/content/tutorials/signal-forms/steps/1-set-up-form-model/README.md
@@ -1,25 +1,25 @@
-# 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
+- フォームデータのTypeScriptインターフェースを定義
+- フォーム値を保持するシグナルを作成
+- `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:
+
+ログインフォームデータの構造を定義するTypeScriptインターフェースを作成します。フォームには次のものが含まれます:
-- An `email` field (string)
-- A `password` field (string)
-- A `rememberMe` field (boolean)
+- `email` フィールド(文字列)
+- `password` フィールド(文字列)
+- `rememberMe` フィールド(真偽値)
```ts
interface LoginData {
@@ -29,11 +29,11 @@ interface LoginData {
}
```
-Add this interface above the `@Component` decorator.
+このインターフェースを `@Component` デコレーターの上に追加します。
-
-Import the `signal` function from `@angular/core` and the `form` function from `@angular/forms/signals`:
+
+`@angular/core` から `signal` 関数を、`@angular/forms/signals` から `form` 関数をインポートします:
```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:
+
+コンポーネントクラスで、初期値を持つ `loginModel` シグナルを作成します。型パラメータとして `LoginData` インターフェースを使用します:
```ts
loginModel = signal({
@@ -53,21 +53,21 @@ loginModel = signal({
});
```
-The initial values start as empty strings for text fields and `false` for the checkbox.
+初期値は、テキストフィールドには空文字列、チェックボックスには `false` として開始します。
-
-Now create the form by passing your model signal to the `form()` function:
+
+モデルシグナルを `form()` 関数に渡してフォームを作成します:
```ts
loginForm = form(this.loginModel);
```
-The `form()` function creates a form from your model, giving you access to field state and validation.
+`form()` 関数は、モデルからフォームを作成し、フィールドの状態とバリデーションへのアクセスを提供します。
-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.
+素晴らしい! フォームモデルを設定しました。`loginModel` シグナルがフォームデータを保持し、`loginForm` が型安全性を備えた各フィールドへのアクセスを提供します。
-Next, you'll learn [how to connect your form to the template](/tutorials/signal-forms/2-connect-form-template)!
+次に、[フォームをテンプレートに接続する方法](/tutorials/signal-forms/2-connect-form-template)を学びます!
diff --git a/adev-ja/src/content/tutorials/signal-forms/steps/1-set-up-form-model/config.en.json b/adev-ja/src/content/tutorials/signal-forms/steps/1-set-up-form-model/config.en.json
new file mode 100644
index 0000000000..fe2755e435
--- /dev/null
+++ b/adev-ja/src/content/tutorials/signal-forms/steps/1-set-up-form-model/config.en.json
@@ -0,0 +1,5 @@
+{
+ "openFiles": ["src/app/app.ts", "src/app/app.html"],
+ "type": "editor",
+ "title": "Set up the form model"
+}
diff --git a/adev-ja/src/content/tutorials/signal-forms/steps/1-set-up-form-model/config.json b/adev-ja/src/content/tutorials/signal-forms/steps/1-set-up-form-model/config.json
index fe2755e435..d0174202d1 100644
--- a/adev-ja/src/content/tutorials/signal-forms/steps/1-set-up-form-model/config.json
+++ b/adev-ja/src/content/tutorials/signal-forms/steps/1-set-up-form-model/config.json
@@ -1,5 +1,5 @@
{
"openFiles": ["src/app/app.ts", "src/app/app.html"],
"type": "editor",
- "title": "Set up the form model"
+ "title": "フォームモデルを設定"
}
diff --git a/adev-ja/src/content/tutorials/signal-forms/steps/2-connect-form-template/README.en.md b/adev-ja/src/content/tutorials/signal-forms/steps/2-connect-form-template/README.en.md
new file mode 100644
index 0000000000..81910530f9
--- /dev/null
+++ b/adev-ja/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
+
+```
+
+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-ja/src/content/tutorials/signal-forms/steps/2-connect-form-template/README.md b/adev-ja/src/content/tutorials/signal-forms/steps/2-connect-form-template/README.md
index 81910530f9..beb7bdc69d 100644
--- a/adev-ja/src/content/tutorials/signal-forms/steps/2-connect-form-template/README.md
+++ b/adev-ja/src/content/tutorials/signal-forms/steps/2-connect-form-template/README.md
@@ -1,22 +1,22 @@
-# 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.
+次に、`[field]` ディレクティブを使用してフォームをテンプレートに接続する必要があります。これにより、フォームモデルと入力要素の間に双方向データバインディングが作成されます。
-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
+- `Field` ディレクティブをインポート
+- `[field]` ディレクティブを使用してフォームフィールドを入力にバインド
+- テキスト入力とチェックボックスをフォームに接続
+- テンプレートにフォームフィールド値を表示
-Let's wire up the template!
+テンプレートを配線しましょう!
-
-Import the `Field` directive from `@angular/forms/signals` and add it to your component's imports array:
+
+`@angular/forms/signals` から `Field` ディレクティブをインポートし、コンポーネントのimports配列に追加します:
```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:
+
+テンプレートで、email入力に `[field]` ディレクティブを追加します:
```html
```
-The `loginForm.email` expression accesses the email field from your form.
+`loginForm.email` 式は、フォームからemailフィールドにアクセスします。
-
-Add the `[field]` directive to the password input:
+
+password入力に `[field]` ディレクティブを追加します:
```html
@@ -51,8 +51,8 @@ Add the `[field]` directive to the password input:
-
-Add the `[field]` directive to the checkbox input:
+
+checkbox入力に `[field]` ディレクティブを追加します:
```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()`:
+
+フォームの下に、現在のフォーム値を表示するデバッグセクションがあります。`.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
```
-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.
+素晴らしい! フォームをテンプレートに接続し、フォーム値を表示しました。`[field]` ディレクティブは双方向データバインディングを自動的に処理します - 入力すると、`loginModel` シグナルが更新され、表示される値が即座に更新されます。
-Next, you'll learn [how to add validation to your form](/tutorials/signal-forms/3-add-validation)!
+次に、[フォームにバリデーションを追加する方法](/tutorials/signal-forms/3-add-validation)を学びます!
diff --git a/adev-ja/src/content/tutorials/signal-forms/steps/2-connect-form-template/config.en.json b/adev-ja/src/content/tutorials/signal-forms/steps/2-connect-form-template/config.en.json
new file mode 100644
index 0000000000..f62c1c60b1
--- /dev/null
+++ b/adev-ja/src/content/tutorials/signal-forms/steps/2-connect-form-template/config.en.json
@@ -0,0 +1,5 @@
+{
+ "openFiles": ["src/app/app.ts", "src/app/app.html"],
+ "type": "editor",
+ "title": "Connect your form to the template"
+}
diff --git a/adev-ja/src/content/tutorials/signal-forms/steps/2-connect-form-template/config.json b/adev-ja/src/content/tutorials/signal-forms/steps/2-connect-form-template/config.json
index f62c1c60b1..7823c70a32 100644
--- a/adev-ja/src/content/tutorials/signal-forms/steps/2-connect-form-template/config.json
+++ b/adev-ja/src/content/tutorials/signal-forms/steps/2-connect-form-template/config.json
@@ -1,5 +1,5 @@
{
"openFiles": ["src/app/app.ts", "src/app/app.html"],
"type": "editor",
- "title": "Connect your form to the template"
+ "title": "フォームをテンプレートに接続"
}
diff --git a/adev-ja/src/content/tutorials/signal-forms/steps/3-add-validation/README.en.md b/adev-ja/src/content/tutorials/signal-forms/steps/3-add-validation/README.en.md
new file mode 100644
index 0000000000..bc5f431c80
--- /dev/null
+++ b/adev-ja/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-ja/src/content/tutorials/signal-forms/steps/3-add-validation/README.md b/adev-ja/src/content/tutorials/signal-forms/steps/3-add-validation/README.md
index bc5f431c80..864a979416 100644
--- a/adev-ja/src/content/tutorials/signal-forms/steps/3-add-validation/README.md
+++ b/adev-ja/src/content/tutorials/signal-forms/steps/3-add-validation/README.md
@@ -1,21 +1,21 @@
-# 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.
+フォームにバリデーションを追加することは、ユーザーが有効なデータを入力することを保証するために重要です。シグナルフォームは、`form()` 関数に渡すスキーマ関数内でバリデーターを使用します。
-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`:
+
+`@angular/forms/signals` から `required` と `email` バリデーターをインポートします:
```ts
import { form, Field, required, email } from '@angular/forms/signals';
@@ -23,8 +23,8 @@ 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:
+
+`form()` 呼び出しを更新して、2番目のパラメータとしてスキーマ関数を含めます。スキーマ関数は、各フィールドにアクセスできる `fieldPath` パラメータを受け取ります:
```ts
loginForm = form(this.loginModel, (fieldPath) => {
@@ -34,8 +34,8 @@ loginForm = form(this.loginModel, (fieldPath) => {
-
-Inside the schema function, add validation for the email field. Use both `required()` and `email()` validators:
+
+スキーマ関数内で、emailフィールドのバリデーションを追加します。`required()` と `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.
+`message` オプションは、ユーザーにカスタムエラーメッセージを提供します。
-
-Add validation for the password field using the `required()` validator:
+
+`required()` バリデーターを使用して、passwordフィールドのバリデーションを追加します:
```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.
+完璧! フォームにバリデーションを追加しました。バリデーターは、ユーザーがフォームと対話すると自動的に実行されます。バリデーションが失敗すると、フィールドの状態がエラーを反映します。
-Next, you'll learn [how to display validation errors in the template](/tutorials/signal-forms/4-display-errors)!
+次に、[テンプレートでバリデーションエラーを表示する方法](/tutorials/signal-forms/4-display-errors)を学びます!
diff --git a/adev-ja/src/content/tutorials/signal-forms/steps/3-add-validation/config.en.json b/adev-ja/src/content/tutorials/signal-forms/steps/3-add-validation/config.en.json
new file mode 100644
index 0000000000..073e877bfa
--- /dev/null
+++ b/adev-ja/src/content/tutorials/signal-forms/steps/3-add-validation/config.en.json
@@ -0,0 +1,5 @@
+{
+ "openFiles": ["src/app/app.ts", "src/app/app.html"],
+ "type": "editor",
+ "title": "Add validation to your form"
+}
diff --git a/adev-ja/src/content/tutorials/signal-forms/steps/3-add-validation/config.json b/adev-ja/src/content/tutorials/signal-forms/steps/3-add-validation/config.json
index 073e877bfa..9c706a75ea 100644
--- a/adev-ja/src/content/tutorials/signal-forms/steps/3-add-validation/config.json
+++ b/adev-ja/src/content/tutorials/signal-forms/steps/3-add-validation/config.json
@@ -1,5 +1,5 @@
{
"openFiles": ["src/app/app.ts", "src/app/app.html"],
"type": "editor",
- "title": "Add validation to your form"
+ "title": "フォームにバリデーションを追加"
}
diff --git a/adev-ja/src/content/tutorials/signal-forms/steps/4-display-errors/README.en.md b/adev-ja/src/content/tutorials/signal-forms/steps/4-display-errors/README.en.md
new file mode 100644
index 0000000000..9b278dfb4c
--- /dev/null
+++ b/adev-ja/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()) {
+
+}
+```
+
+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()) {
+
+}
+```
+
+
+
+
+
+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-ja/src/content/tutorials/signal-forms/steps/4-display-errors/README.md b/adev-ja/src/content/tutorials/signal-forms/steps/4-display-errors/README.md
index 9b278dfb4c..931729b309 100644
--- a/adev-ja/src/content/tutorials/signal-forms/steps/4-display-errors/README.md
+++ b/adev-ja/src/content/tutorials/signal-forms/steps/4-display-errors/README.md
@@ -1,22 +1,22 @@
-# 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
+- バリデーションシグナルでフィールドの状態にアクセス
+- `@if` を使用してエラーを条件付きで表示
+- `@for` でエラーをループ
+- ユーザーの対話後にのみエラーを表示
-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:
+
+email入力の下に、条件付きエラー表示を追加します。これは、フィールドが無効でタッチ済みの両方である場合にのみエラーを表示します:
```html
-
-Below the password input, add the same pattern for password errors:
+
+password入力の下に、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.
+素晴らしい! フォームにエラー表示を追加しました。エラーは、ユーザーがフィールドと対話した後にのみ表示され、邪魔にならずに役立つフィードバックを提供します。
-Next, you'll learn [how to handle form submission](/tutorials/signal-forms/5-add-submission)!
+次に、[フォーム送信の処理方法](/tutorials/signal-forms/5-add-submission)を学びます!
diff --git a/adev-ja/src/content/tutorials/signal-forms/steps/4-display-errors/config.en.json b/adev-ja/src/content/tutorials/signal-forms/steps/4-display-errors/config.en.json
new file mode 100644
index 0000000000..80e88c4b64
--- /dev/null
+++ b/adev-ja/src/content/tutorials/signal-forms/steps/4-display-errors/config.en.json
@@ -0,0 +1,5 @@
+{
+ "openFiles": ["src/app/app.html", "src/app/app.ts"],
+ "type": "editor",
+ "title": "Display validation errors"
+}
diff --git a/adev-ja/src/content/tutorials/signal-forms/steps/4-display-errors/config.json b/adev-ja/src/content/tutorials/signal-forms/steps/4-display-errors/config.json
index 80e88c4b64..c4efefe1aa 100644
--- a/adev-ja/src/content/tutorials/signal-forms/steps/4-display-errors/config.json
+++ b/adev-ja/src/content/tutorials/signal-forms/steps/4-display-errors/config.json
@@ -1,5 +1,5 @@
{
"openFiles": ["src/app/app.html", "src/app/app.ts"],
"type": "editor",
- "title": "Display validation errors"
+ "title": "バリデーションエラーを表示"
}
diff --git a/adev-ja/src/content/tutorials/signal-forms/steps/5-add-submission/README.en.md b/adev-ja/src/content/tutorials/signal-forms/steps/5-add-submission/README.en.md
new file mode 100644
index 0000000000..783b73a605
--- /dev/null
+++ b/adev-ja/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-ja/src/content/tutorials/signal-forms/steps/5-add-submission/README.md b/adev-ja/src/content/tutorials/signal-forms/steps/5-add-submission/README.md
index 783b73a605..f3a84151d8 100644
--- a/adev-ja/src/content/tutorials/signal-forms/steps/5-add-submission/README.md
+++ b/adev-ja/src/content/tutorials/signal-forms/steps/5-add-submission/README.md
@@ -1,22 +1,22 @@
-# 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.
+最後に、フォーム送信の処理方法を学びましょう。`submit()` 関数を使用して、フォームが有効なときに非同期処理を実行し、フォームにエラーがあるときに送信ボタンを無効にする方法を学びます。
-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
+- `submit()` 関数をインポート
+- 送信ハンドラーメソッドを作成
+- `submit()` を使用して有効なときのみロジックを実行
+- フォームの状態に基づいて送信ボタンを無効化
-Let's complete the form!
+フォームを完成させましょう!
-
-Import the `submit` function from `@angular/forms/signals`:
+
+`@angular/forms/signals` から `submit` 関数をインポートします:
```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:
+
+コンポーネントクラスで、フォーム送信を処理する `onSubmit()` メソッドを追加します:
```ts
onSubmit(event: Event) {
@@ -38,11 +38,11 @@ onSubmit(event: Event) {
}
```
-The `submit()` function only runs your async callback if the form is valid. It also handles the form's submission state automatically.
+`submit()` 関数は、フォームが有効な場合にのみ非同期コールバックを実行します。また、フォームの送信状態も自動的に処理します。
-
-In your template, bind the `onSubmit()` method to the form's submit event:
+
+テンプレートで、`onSubmit()` メソッドをフォームのsubmitイベントにバインドします:
```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)!
+学んだことを確認し、高度なトピックを探索する準備はできましたか?[次のステップ](/tutorials/signal-forms/6-next-steps)に進みましょう!
diff --git a/adev-ja/src/content/tutorials/signal-forms/steps/5-add-submission/config.en.json b/adev-ja/src/content/tutorials/signal-forms/steps/5-add-submission/config.en.json
new file mode 100644
index 0000000000..35b832dec1
--- /dev/null
+++ b/adev-ja/src/content/tutorials/signal-forms/steps/5-add-submission/config.en.json
@@ -0,0 +1,5 @@
+{
+ "openFiles": ["src/app/app.ts", "src/app/app.html"],
+ "type": "editor",
+ "title": "Add form submission"
+}
diff --git a/adev-ja/src/content/tutorials/signal-forms/steps/5-add-submission/config.json b/adev-ja/src/content/tutorials/signal-forms/steps/5-add-submission/config.json
index 35b832dec1..7bb6189aa8 100644
--- a/adev-ja/src/content/tutorials/signal-forms/steps/5-add-submission/config.json
+++ b/adev-ja/src/content/tutorials/signal-forms/steps/5-add-submission/config.json
@@ -1,5 +1,5 @@
{
"openFiles": ["src/app/app.ts", "src/app/app.html"],
"type": "editor",
- "title": "Add form submission"
+ "title": "フォーム送信を追加"
}
diff --git a/adev-ja/src/content/tutorials/signal-forms/steps/6-next-steps/README.en.md b/adev-ja/src/content/tutorials/signal-forms/steps/6-next-steps/README.en.md
new file mode 100644
index 0000000000..aca9ea0d78
--- /dev/null
+++ b/adev-ja/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/signal-forms)** - Introduction to Signal Forms and when to use them
+- **[Form Models Guide](guide/forms/signal-forms/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-ja/src/content/tutorials/signal-forms/steps/6-next-steps/README.md b/adev-ja/src/content/tutorials/signal-forms/steps/6-next-steps/README.md
index aca9ea0d78..976ceea103 100644
--- a/adev-ja/src/content/tutorials/signal-forms/steps/6-next-steps/README.md
+++ b/adev-ja/src/content/tutorials/signal-forms/steps/6-next-steps/README.md
@@ -1,32 +1,32 @@
-# Congratulations!
+# おめでとうございます!
-You've completed the Signal Forms tutorial and built a complete login form from scratch!
+シグナルフォームチュートリアルを完了し、ゼロから完全なログインフォームを構築しました!
-## What you learned
+## 学んだこと {#what-you-learned}
-Throughout this tutorial, you learned the fundamentals of Angular Signal Forms:
+このチュートリアル全体を通して、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. **フォームモデル** - シグナルと `form()` 関数を使用した型安全なフォームデータの作成
+2. **フィールドバインディング** - 双方向データバインディングのための `[field]` ディレクティブの使用と、`value()` によるフィールドの表示
+3. **バリデーション** - カスタムメッセージを使用した組み込みバリデーター(`required()`、`email()` など)の適用
+4. **エラー表示** - フィールドの状態に基づいたバリデーションエラーの条件付き表示
+5. **フォーム送信** - `submit()` 関数を使用したフォーム送信の処理
-## Next steps
+## 次のステップ {#next-steps}
-Ready to learn more? Here are recommended next steps:
+もっと学ぶ準備はできましたか?推奨される次のステップは次のとおりです:
-### Explore the documentation
+### ドキュメントを探索 {#explore-the-documentation}
-- **[Signal Forms Overview](guide/forms/signal-forms)** - Introduction to Signal Forms and when to use them
-- **[Form Models Guide](guide/forms/signal-forms/models)** - Deep dive into form models and data management
+- **[シグナルフォーム概要](guide/forms/signal-forms)** - シグナルフォームの紹介といつ使用するか
+- **[フォームモデルガイド](guide/forms/signal-forms/models)** - フォームモデルとデータ管理の詳細
-## Keep learning
+## 学び続ける {#keep-learning}
-Remember: Signal Forms is experimental, so check the [official documentation](guide/forms/signal-forms) for updates to the API.
+覚えておいてください: シグナルフォームは実験的であるため、APIの更新については[公式ドキュメント](guide/forms/signal-forms)を確認してください。
-Happy coding!
+楽しいコーディングを!
diff --git a/adev-ja/src/content/tutorials/signal-forms/steps/6-next-steps/config.en.json b/adev-ja/src/content/tutorials/signal-forms/steps/6-next-steps/config.en.json
new file mode 100644
index 0000000000..1617fce433
--- /dev/null
+++ b/adev-ja/src/content/tutorials/signal-forms/steps/6-next-steps/config.en.json
@@ -0,0 +1,4 @@
+{
+ "type": "editor",
+ "title": "Next steps"
+}
diff --git a/adev-ja/src/content/tutorials/signal-forms/steps/6-next-steps/config.json b/adev-ja/src/content/tutorials/signal-forms/steps/6-next-steps/config.json
index 1617fce433..4845376b9a 100644
--- a/adev-ja/src/content/tutorials/signal-forms/steps/6-next-steps/config.json
+++ b/adev-ja/src/content/tutorials/signal-forms/steps/6-next-steps/config.json
@@ -1,4 +1,4 @@
{
"type": "editor",
- "title": "Next steps"
+ "title": "次のステップ"
}