` and `` elements must be descendants of the component's host element.
They can come from the component's template or the views of its child components, but not elsewhere in the app.
diff --git a/adev-ja/src/content/guide/components/styling.md b/adev-ja/src/content/guide/components/styling.md
index c8dca8ca9..896adad0c 100644
--- a/adev-ja/src/content/guide/components/styling.md
+++ b/adev-ja/src/content/guide/components/styling.md
@@ -68,9 +68,10 @@ export class ProfilePhoto {}
モダンブラウザでは非推奨ですが、Angularのコンパイラは完全にサポートします。これらの擬似クラスは
ネイティブの[Shadow DOM](https://developer.mozilla.org/docs/Web/Web_Components/Using_shadow_DOM)
に依存せずに使用できます。
-コンパイル時に、フレームワークはこれらの擬似クラスを属性に変換するため、実行時にこれらのネイティブ擬似クラスのルール(ブラウザの互換性、特異性など)に準拠しません。Angularの
-エミュレートされたカプセル化モードは、
-`::shadow`や`::part`など、Shadow DOMに関連するその他の擬似クラスをサポートしていません。
+コンパイル時に、フレームワークはこれらの擬似クラスを属性に変換するため、実行時にこれらのネイティブ擬似クラスの
+ルール(ブラウザの互換性、特異性など)に準拠しません。Angularの
+エミュレートされたカプセル化モードは、Shadow DOMに関連するその他の擬似クラス、たとえば
+`::shadow`や`::part`などはサポートしていません。
#### `::ng-deep`
@@ -141,4 +142,3 @@ Angularは、スタイル要素内のバインディングをサポートして
[ `@import` at-rule](https://developer.mozilla.org/docs/Web/CSS/@import)
を使用してCSSファイルを参照できます。
Angularはこれらの参照を*外部*スタイルとして扱います。外部スタイルは、エミュレートされたビューカプセル化の影響を受けません。
-
diff --git a/adev-ja/src/content/guide/di/defining-dependency-providers.md b/adev-ja/src/content/guide/di/defining-dependency-providers.md
index 84d4684f4..87217b8f4 100644
--- a/adev-ja/src/content/guide/di/defining-dependency-providers.md
+++ b/adev-ja/src/content/guide/di/defining-dependency-providers.md
@@ -731,6 +731,10 @@ export const routes: Routes = [
];
```
+Services provided at the route level are available to all components and directives within that route, as well as to its guards and resolvers.
+
+Since these services are instantiated independently of the route’s components, they do not have direct access to route-specific information.
+
## Library author patterns
When creating Angular libraries, you often need to provide flexible configuration options for consumers while maintaining clean APIs. Angular's own libraries demonstrate powerful patterns for achieving this.
diff --git a/adev-ja/src/content/guide/di/hierarchical-dependency-injection.en.md b/adev-ja/src/content/guide/di/hierarchical-dependency-injection.en.md
index 75e92df64..ccc5bf0b3 100644
--- a/adev-ja/src/content/guide/di/hierarchical-dependency-injection.en.md
+++ b/adev-ja/src/content/guide/di/hierarchical-dependency-injection.en.md
@@ -232,7 +232,7 @@ In this case, the injector looks no further than the current `ElementInjector` b
providers: [{provide: FlowerService, useValue: {emoji: '🌷'}}],
})
export class Self {
- constructor(@Self() public flower: FlowerService) {}
+ public flower = inject(FlowerService, {self: true});
}
```
diff --git a/adev-ja/src/content/guide/di/hierarchical-dependency-injection.md b/adev-ja/src/content/guide/di/hierarchical-dependency-injection.md
index afcaff207..51745375b 100644
--- a/adev-ja/src/content/guide/di/hierarchical-dependency-injection.md
+++ b/adev-ja/src/content/guide/di/hierarchical-dependency-injection.md
@@ -232,7 +232,7 @@ export class SelfNoData {
providers: [{provide: FlowerService, useValue: {emoji: '🌷'}}],
})
export class Self {
- constructor(@Self() public flower: FlowerService) {}
+ public flower = inject(FlowerService, {self: true});
}
```
diff --git a/adev-ja/src/content/guide/directives/attribute-directives.en.md b/adev-ja/src/content/guide/directives/attribute-directives.en.md
index f5af756de..0edbeb78b 100644
--- a/adev-ja/src/content/guide/directives/attribute-directives.en.md
+++ b/adev-ja/src/content/guide/directives/attribute-directives.en.md
@@ -14,7 +14,14 @@ This section walks you through creating a highlight directive that sets the back
The CLI creates `src/app/highlight.directive.ts`, a corresponding test file `src/app/highlight.directive.spec.ts`.
-
+ ```angular-ts
+ import {Directive} from '@angular/core';
+
+ @Directive({
+ selector: '[appHighlight]',
+ })
+ export class HighlightDirective {}
+ ```
The `@Directive()` decorator's configuration property specifies the directive's CSS attribute selector, `[appHighlight]`.
@@ -25,11 +32,13 @@ This section walks you through creating a highlight directive that sets the back
1. Add logic to the `HighlightDirective` class that sets the background to yellow.
-
+
-HELPFUL: Directives _do not_ support namespaces.
+IMPORTANT: Directives _do not_ support namespaces.
-
+```angular-html {avoid}
+
This is invalid
+```
## Applying an attribute directive
diff --git a/adev-ja/src/content/guide/directives/attribute-directives.md b/adev-ja/src/content/guide/directives/attribute-directives.md
index dc35f294b..6e7bec394 100644
--- a/adev-ja/src/content/guide/directives/attribute-directives.md
+++ b/adev-ja/src/content/guide/directives/attribute-directives.md
@@ -14,7 +14,14 @@
CLIは`src/app/highlight.directive.ts`と、対応するテストファイル`src/app/highlight.directive.spec.ts`を作成します。
-
+ ```angular-ts
+ import {Directive} from '@angular/core';
+
+ @Directive({
+ selector: '[appHighlight]',
+ })
+ export class HighlightDirective {}
+ ```
`@Directive()`デコレーターの構成プロパティは、ディレクティブのCSS属性セレクター`[appHighlight]`を指定します。
@@ -25,11 +32,13 @@
1. 背景を黄色に設定するロジックを`HighlightDirective`クラスに追加します。
-
+
-HELPFUL: ディレクティブは_ネームスペース_をサポートしていません。
+IMPORTANT: ディレクティブは_ネームスペース_をサポートしていません。
-
+```angular-html {avoid}
+This is invalid
+```
## 属性ディレクティブの適用
@@ -102,7 +111,6 @@ HELPFUL: ハンドラーは、ホストDOM要素`el`に色を設定するヘル
1. `highlight.directive.ts`で、`onMouseEnter`メソッドを修正して、最初に`appHighlight`でハイライトしようとします。`appHighlight`が`undefined`の場合は`red`にフォールバックします。
-
4. アプリケーションを起動して、ユーザーがラジオボタンで色を選択できることを確認します。
@@ -148,4 +156,4 @@ HELPFUL: ハンドラーは、ホストDOM要素`el`に色を設定するヘル
-`ngNonBindable`を親要素に適用すると、Angularは要素の子要素に対して、プロパティバインディングやイベントバインディングなどあらゆる種類の補間とバインディングを無効にします。
\ No newline at end of file
+`ngNonBindable`を親要素に適用すると、Angularは要素の子要素に対して、プロパティバインディングやイベントバインディングなどあらゆる種類の補間とバインディングを無効にします。
diff --git a/adev-ja/src/content/guide/directives/overview.en.md b/adev-ja/src/content/guide/directives/overview.en.md
index 287f986e2..6deb5de41 100644
--- a/adev-ja/src/content/guide/directives/overview.en.md
+++ b/adev-ja/src/content/guide/directives/overview.en.md
@@ -38,7 +38,15 @@ HELPFUL: To add or remove a _single_ class, use [class binding](/guide/templates
To use `NgClass`, add it to the component's `imports` list.
-
+```angular-ts
+import {NgClass} from '@angular/common';
+
+@Component({
+ /* ... */
+ imports: [NgClass],
+})
+export class AppComponent {}
+```
### Using `NgClass` with an expression
@@ -61,7 +69,7 @@ Because `isSpecial` is true, `ngClass` applies the class of `special` to the `
+
For this use case, Angular applies the classes on initialization and in case of changes caused by reassigning the `currentClasses` object.
The full example calls `setCurrentClasses()` initially with `ngOnInit()` when the user clicks on the `Refresh currentClasses` button.
@@ -75,7 +83,15 @@ HELPFUL: To add or remove a _single_ style, use [style bindings](guide/templates
To use `NgStyle`, add it to the component's `imports` list.
-
+```angular-ts
+import {NgStyle} from '@angular/common';
+
+@Component({
+ /* ... */
+ imports: [NgStyle],
+})
+export class AppComponent {}
+```
Use `NgStyle` to set multiple inline styles simultaneously, based on the state of the component.
@@ -87,7 +103,7 @@ Use `NgStyle` to set multiple inline styles simultaneously, based on the state o
1. To set the element's styles, add an `ngStyle` property binding to `currentStyles`.
-
+
For this use case, Angular applies the styles upon initialization and in case of changes.
To do this, the full example calls `setCurrentStyles()` initially with `ngOnInit()` and when the dependent properties change through a button click.
diff --git a/adev-ja/src/content/guide/directives/overview.md b/adev-ja/src/content/guide/directives/overview.md
index 0058c3ed1..bc6e9ac2a 100644
--- a/adev-ja/src/content/guide/directives/overview.md
+++ b/adev-ja/src/content/guide/directives/overview.md
@@ -38,7 +38,15 @@ HELPFUL: _単一の_ クラスを追加または削除するには、`NgClass`
`NgClass` を使用するには、コンポーネントの `imports` リストに追加します。
-
+```angular-ts
+import {NgClass} from '@angular/common';
+
+@Component({
+ /* ... */
+ imports: [NgClass],
+})
+export class AppComponent {}
+```
### 式を使用して `NgClass` を使用
@@ -75,7 +83,15 @@ HELPFUL: To add or remove a _single_ style, use [style bindings](guide/templates
`NgStyle` を使用するには、コンポーネントの `imports` リストに追加します。
-
+```angular-ts
+import {NgStyle} from '@angular/common';
+
+@Component({
+ /* ... */
+ imports: [NgStyle],
+})
+export class AppComponent {}
+```
`NgStyle` を使用して、コンポーネントの状態に基づいて、複数のインラインスタイルを同時に設定します。
@@ -93,7 +109,6 @@ HELPFUL: To add or remove a _single_ style, use [style bindings](guide/templates
これを行うために、完全な例では、`ngOnInit()` を使用して最初に `setCurrentStyles()` を呼び出し、依存プロパティがボタンクリックを通じて変更されたときに呼び出します。
ただし、これらの手順は、`ngStyle` 自体を実装するために必要ではありません。
-
## DOM 要素のないディレクティブをホストする
Angularの `` は、AngularがDOMに配置しないため、スタイルやレイアウトに影響を与えないグループ化要素です。
@@ -122,4 +137,4 @@ Angularの `` は、AngularがDOMに配置しないため、スタ
-
\ No newline at end of file
+
diff --git a/adev-ja/src/content/guide/directives/structural-directives.en.md b/adev-ja/src/content/guide/directives/structural-directives.en.md
index 8751f2b8a..9a0f469bf 100644
--- a/adev-ja/src/content/guide/directives/structural-directives.en.md
+++ b/adev-ja/src/content/guide/directives/structural-directives.en.md
@@ -56,7 +56,7 @@ The second piece of syntax is a key-expression pair, `from source`. `from` is a
## One structural directive per element
-You can only apply one structural directive per element when using the shorthand syntax. This is because there is only one `` element onto which that directive gets unwrapped. Multiple directives would require multiple nested ``, and it's unclear which directive should be first. `` can be used when to create wrapper layers when multiple structural directives need to be applied around the same physical DOM element or component, which allows the user to define the nested structure.
+You can only apply one structural directive per element when using the shorthand syntax. This is because there is only one `` element onto which that directive gets unwrapped. Multiple directives would require multiple nested ``, and it's unclear which directive should be first. `` can be used to create wrapper layers when multiple structural directives need to be applied around the same physical DOM element or component, which allows the user to define the nested structure.
## Creating a structural directive
@@ -76,7 +76,7 @@ Angular creates the directive class and specifies the CSS selector, `[select]`,
Import `TemplateRef`, and `ViewContainerRef`. Inject `TemplateRef` and `ViewContainerRef` in the directive as private properties.
```ts
-import {Directive, TemplateRef, ViewContainerRef} from '@angular/core';
+import {Directive, TemplateRef, ViewContainerRef, inject} from '@angular/core';
@Directive({
selector: '[select]',
diff --git a/adev-ja/src/content/guide/directives/structural-directives.md b/adev-ja/src/content/guide/directives/structural-directives.md
index 952a27507..0876d9911 100644
--- a/adev-ja/src/content/guide/directives/structural-directives.md
+++ b/adev-ja/src/content/guide/directives/structural-directives.md
@@ -76,7 +76,7 @@ Angularは、ディレクティブクラスを作成し、テンプレートで
`TemplateRef`と`ViewContainerRef`をインポートし、ディレクティブ内で`TemplateRef`と`ViewContainerRef`をプライベートプロパティとしてインジェクトします。
```ts
-import {Directive, TemplateRef, ViewContainerRef} from '@angular/core';
+import {Directive, TemplateRef, ViewContainerRef, inject} from '@angular/core';
@Directive({
selector: '[select]',
diff --git a/adev-ja/src/content/guide/drag-drop.md b/adev-ja/src/content/guide/drag-drop.md
index 2e2aebbe3..91769cd4b 100644
--- a/adev-ja/src/content/guide/drag-drop.md
+++ b/adev-ja/src/content/guide/drag-drop.md
@@ -329,7 +329,7 @@ Combining `cdkDropListHasAnchor` with `cdkDropListSortingDisabled` makes it poss
Drag and drop supports animations for both:
-- Sorting an draggable element inside a list
+- Sorting a draggable element inside a list
- Moving the draggable element from the position that the user dropped it to the final position inside the list
To set up your animations, define a CSS transition that targets the transform property. The following classes can be used for animations:
diff --git a/adev-ja/src/content/guide/forms/dynamic-forms.en.md b/adev-ja/src/content/guide/forms/dynamic-forms.en.md
index 4bd92aef6..be680110b 100644
--- a/adev-ja/src/content/guide/forms/dynamic-forms.en.md
+++ b/adev-ja/src/content/guide/forms/dynamic-forms.en.md
@@ -9,12 +9,12 @@ A typical use-case is a questionnaire.
You might need to get input from users in different contexts.
The format and style of the forms a user sees should remain constant, while the actual questions you need to ask vary with the context.
-In this tutorial you will build a dynamic form that presents a basic questionnaire.
+In this tutorial, you will build a dynamic form that presents a basic questionnaire.
You build an online application for heroes seeking employment.
The agency is constantly tinkering with the application process, but by using the dynamic form
you can create the new forms on the fly without changing the application code.
-The tutorial walks you through the following steps.
+The tutorial walks you through the following steps:
1. Enable reactive forms for a project.
1. Establish a data model to represent form controls.
@@ -30,7 +30,7 @@ The basic version can evolve to support a richer variety of questions, more grac
Dynamic forms are based on reactive forms.
-To give the application access reactive forms directives, import `ReactiveFormsModule` from the `@angular/forms` library into the necessary components.
+To give the application access to reactive form directives, import `ReactiveFormsModule` from the `@angular/forms` package into the necessary components.
diff --git a/adev-ja/src/content/guide/forms/dynamic-forms.md b/adev-ja/src/content/guide/forms/dynamic-forms.md
index a78b8d050..66fe77349 100644
--- a/adev-ja/src/content/guide/forms/dynamic-forms.md
+++ b/adev-ja/src/content/guide/forms/dynamic-forms.md
@@ -14,7 +14,7 @@
エージェンシーは常にアプリケーションプロセスをいじっていますが、
動的フォームを使用することでアプリケーションコードを変更せずに新しいフォームをオンザフライで作成できます。
-このチュートリアルでは、次の手順について説明します。
+このチュートリアルでは、次の手順について説明します：
1. プロジェクトでリアクティブフォームを有効にする。
1. フォームコントロールを表すデータモデルを確立する。
@@ -30,7 +30,7 @@
動的フォームはリアクティブフォームに基づいています。
-アプリケーションにリアクティブフォームディレクティブへのアクセス権を与えるには、必要なコンポーネントに `@angular/forms` ライブラリから `ReactiveFormsModule` をインポートします。
+アプリケーションにリアクティブフォームディレクティブへのアクセス権を与えるには、必要なコンポーネントに `@angular/forms` パッケージから `ReactiveFormsModule` をインポートします。
diff --git a/adev-ja/src/content/guide/forms/form-validation.en.md b/adev-ja/src/content/guide/forms/form-validation.en.md
index 07d9d9d67..4cce9a1d4 100644
--- a/adev-ja/src/content/guide/forms/form-validation.en.md
+++ b/adev-ja/src/content/guide/forms/form-validation.en.md
@@ -8,7 +8,7 @@ This page shows how to validate user input from the UI and display useful valida
To add validation to a template-driven form, you add the same validation attributes as you would with [native HTML form validation](https://developer.mozilla.org/docs/Web/Guide/HTML/HTML5/Constraint_validation).
Angular uses directives to match these attributes with validator functions in the framework.
-Every time the value of a form control changes, Angular runs validation and generates either a list of validation errors that results in an `INVALID` status, or null, which results in a VALID status.
+Every time the value of a form control changes, Angular runs validation and generates either a list of validation errors that results in an `INVALID` status, or `null`, which results in a `VALID` status.
You can then inspect the control's state by exporting `ngModel` to a local template variable.
The following example exports `NgModel` into a variable called `name`:
@@ -237,7 +237,7 @@ Asynchronous validators implement the `AsyncValidatorFn` and `AsyncValidator` in
These are very similar to their synchronous counterparts, with the following differences.
- The `validate()` functions must return a Promise or an observable,
-- The observable returned must be finite, meaning it must complete at some point.
+- The observable returned must be finite, meaning that it must complete at some point.
To convert an infinite observable into a finite one, pipe the observable through a filtering operator such as `first`, `last`, `take`, or `takeUntil`.
Asynchronous validation happens after the synchronous validation, and is performed only if the synchronous validation is successful.
@@ -339,6 +339,70 @@ With reactive forms, set the property in the `FormControl` instance.
new FormControl('', {updateOn: 'blur'});
```
+## Managing validators dynamically in reactive forms
+
+In complex reactive forms, you may need to add, remove, or modify validators based on user input or application state.
+Angular provides several methods on `AbstractControl` to manage validators at runtime without recreating form controls.
+
+### Adding and removing validators
+
+The [`addValidators`](api/forms/AbstractControl#addValidators) and [`removeValidators`](api/forms/AbstractControl#removeValidators) methods allow you to modify a control's validators after initialization.
+
+```ts
+onCountryChange(country: string) {
+ const postalCodeControl = this.profileForm.get('postalCode');
+
+ if (country === 'US') {
+ // Add validators for US postal codes
+ postalCodeControl.addValidators([Validators.required, Validators.pattern(/^\d{5}$/)]);
+ } else {
+ // Remove validators when not US
+ postalCodeControl.removeValidators([Validators.required]);
+ }
+
+ postalCodeControl.updateValueAndValidity();
+}
+```
+
+### Replacing all validators
+
+Use [`setValidators`](api/forms/AbstractControl#setValidators) to replace all existing synchronous validators on a control, or [`clearValidators`](api/forms/AbstractControl#clearValidators) to remove all validators.
+
+```ts
+toggleStrictNameValidation(isStrict: boolean) {
+ const nameControl = this.profileForm.get('name');
+
+ if (enable) {
+ // Set strict validation rules
+ nameControl.setValidators([
+ Validators.required,
+ Validators.minLength(3),
+ Validators.pattern(/^[a-zA-Z]+$/),
+ ]);
+ } else {
+ // Clear all validators
+ nameControl.clearValidators();
+ }
+
+ nameControl.updateValueAndValidity();
+}
+```
+
+The same pattern applies to async validators using [`addAsyncValidators`](api/forms/AbstractControl#addAsyncValidators), [`removeAsyncValidators`](api/forms/AbstractControl#removeAsyncValidators), [`setAsyncValidators`](api/forms/AbstractControl#setAsyncValidators), and [`clearAsyncValidators`](api/forms/AbstractControl#clearAsyncValidators).
+
+### Triggering validation updates
+
+After modifying validators, call [`updateValueAndValidity`](api/forms/AbstractControl#updateValueAndValidity) to recalculate the control's validation status.
+This method accepts options to control update behavior.
+
+```ts
+// Update control and notify parent
+control.updateValueAndValidity();
+
+// Update control only, don't notify parent or emit events
+control.updateValueAndValidity({onlySelf: true, emitEvent: false});
+```
+
## Interaction with native HTML form validation
By default, Angular disables [native HTML form validation](https://developer.mozilla.org/docs/Web/Guide/HTML/Constraint_validation) by adding the `novalidate` attribute on the enclosing `