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 +

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

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. +素晴らしい! フォームをテンプレートに接続し、フォーム値を表示しました。`[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()) { +
+ @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-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 @@ -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: + +フォームが無効なときに無効になるように送信ボタンを更新します: ```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": "次のステップ" }