mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
docs(forms): replace 'legacy' with 'existing' in migration guide and navigation
Updates terminology from 'Legacy Forms' to 'Existing Forms' in: - Migration guide documentation - Navigation entries label Backport of #66969
This commit is contained in:
committed by
Andrew Kushnir
parent
6c14e3af2e
commit
c6bbf403a3
@@ -500,7 +500,7 @@ export const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
|
||||
status: 'new',
|
||||
},
|
||||
{
|
||||
label: 'Migrating from Legacy Forms',
|
||||
label: 'Migrating from Reactive Forms',
|
||||
path: 'guide/forms/signals/migration',
|
||||
contentPath: 'guide/forms/signals/migration',
|
||||
category: 'Signal Forms',
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
# Migrating existing forms to Signal Forms
|
||||
|
||||
This guide provides strategies for migrating existing codebases to Signal Forms, focusing on interoperability with
|
||||
legacy Reactive Forms.
|
||||
existing Reactive Forms.
|
||||
|
||||
## Top-down migration using `compatForm`
|
||||
|
||||
@@ -10,7 +10,7 @@ controls that involve:
|
||||
|
||||
- Complex asynchronous logic.
|
||||
- Intricate RxJS operators that are not yet ported.
|
||||
- Integration with legacy third-party libraries.
|
||||
- Integration with existing third-party libraries.
|
||||
|
||||
### Integrating a `FormControl` into a signal form
|
||||
|
||||
@@ -24,7 +24,7 @@ import {signal} from '@angular/core';
|
||||
import {FormControl, Validators} from '@angular/forms';
|
||||
import {compatForm} from '@angular/forms/signals/compat';
|
||||
|
||||
// 1. Existing legacy control with a specialized validator
|
||||
// 1. Existing control with a specialized validator
|
||||
const passwordControl = new FormControl('', {
|
||||
validators: [Validators.required, enterprisePasswordValidator()],
|
||||
nonNullable: true,
|
||||
@@ -33,7 +33,7 @@ const passwordControl = new FormControl('', {
|
||||
// 2. Wrap it inside your form state signal
|
||||
const user = signal({
|
||||
email: '',
|
||||
password: passwordControl, // Nest the legacy control directly
|
||||
password: passwordControl, // Nest the existing control directly
|
||||
});
|
||||
|
||||
// 3. Create the form
|
||||
@@ -45,7 +45,7 @@ console.log(f.password().value()); // Current value of passwordControl
|
||||
|
||||
// Reactive state is proxied automatically
|
||||
const isPasswordValid = f.password().valid();
|
||||
const passwordErrors = f.password().errors(); // Returns CompatValidationError if the legacy validator fails
|
||||
const passwordErrors = f.password().errors(); // Returns CompatValidationError if the existing validator fails
|
||||
```
|
||||
|
||||
In the template, use standard reactive syntax by binding the underlying control:
|
||||
@@ -83,14 +83,15 @@ In the template, use standard reactive syntax by binding the underlying control:
|
||||
|
||||
### Integrating a `FormGroup` into a signal form
|
||||
|
||||
You can also wrap an entire `FormGroup`. This is common when a reusable sub-section of a form—such as an **Address Block**—is still managed by legacy Reactive Forms.
|
||||
You can also wrap an entire `FormGroup`. This is common when a reusable sub-section of a form—such as an
|
||||
**Address Block**—is still managed by existing Reactive Forms.
|
||||
|
||||
```typescript
|
||||
import {signal} from '@angular/core';
|
||||
import {FormGroup, FormControl, Validators} from '@angular/forms';
|
||||
import {compatForm} from '@angular/forms/signals/compat';
|
||||
|
||||
// 1. A legacy address group with its own validation logic
|
||||
// 1. An existing address group with its own validation logic
|
||||
const addressGroup = new FormGroup({
|
||||
street: new FormControl('123 Angular Way', Validators.required),
|
||||
city: new FormControl('Mountain View', Validators.required),
|
||||
@@ -109,7 +110,7 @@ const f = compatForm(checkoutModel, (p) => {
|
||||
```
|
||||
|
||||
The `shippingAddress` field acts as a branch in your Signal Form tree. You can bind these nested controls in your
|
||||
template by accessing the underlying legacy controls via `.control()`:
|
||||
template by accessing the underlying existing controls via `.control()`:
|
||||
|
||||
```angular-html
|
||||
<form novalidate>
|
||||
@@ -187,7 +188,7 @@ const passwordControl = new FormControl('password' /** ... */);
|
||||
|
||||
const user = signal({
|
||||
email: '',
|
||||
password: passwordControl, // Nest the legacy control directly
|
||||
password: passwordControl, // Nest the existing control directly
|
||||
});
|
||||
|
||||
const form = compatForm(user);
|
||||
|
||||
Reference in New Issue
Block a user