docs: Update FormArray.push usage (#64499)

PR Close #64499
This commit is contained in:
SkyZeroZx 2025-10-17 10:59:19 -05:00 committed by Jessica Janiuk
parent 086857c2f8
commit 0f81ef405b
2 changed files with 13 additions and 6 deletions

View file

@ -359,7 +359,7 @@ Use the getter syntax to create an `aliases` class property to retrieve the alia
<docs-code header="src/app/profile-editor/profile-editor.component.ts (aliases getter)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.ts" visibleRegion="aliases-getter"/>
Because the returned control is of the type `AbstractControl`, you need to provide an explicit type to access the method syntax for the form array instance. Define a method to dynamically insert an alias control into the alias's form array. The `FormArray.push()` method inserts the control as a new item in the array.
Because the returned control is of the type `AbstractControl`, you need to provide an explicit type to access the method syntax for the form array instance. Define a method to dynamically insert an alias control into the alias's form array. The `FormArray.push()` method inserts the control as a new item in the array, and you can also pass an array of controls to FormArray.push() to register multiple controls at once.
<docs-code header="src/app/profile-editor/profile-editor.component.ts (add alias)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.ts" visibleRegion="add-alias"/>

View file

@ -8,7 +8,7 @@ As background for this guide, you should already be familiar with [Angular React
<docs-video src="https://www.youtube.com/embed/L-odCf4MfJc" alt="Typed Forms in Angular" />
With Angular reactive forms, you explicitly specify a *form model*. As a simple example, consider this basic user login form:
With Angular reactive forms, you explicitly specify a _form model_. As a simple example, consider this basic user login form:
```ts
const login = new FormGroup({
@ -29,7 +29,7 @@ With strictly typed reactive forms, the above code does not compile, because the
In addition to the added safety, the types enable a variety of other improvements, such as better autocomplete in IDEs, and an explicit way to specify form structure.
These improvements currently apply only to *reactive* forms (not [*template-driven* forms](guide/forms/template-driven-forms)).
These improvements currently apply only to _reactive_ forms (not [_template-driven_ forms](guide/forms/template-driven-forms)).
## Untyped Forms
@ -56,7 +56,7 @@ This control will be automatically inferred to have the type `FormControl<string
### Nullability
You might wonder: why does the type of this control include `null`? This is because the control can become `null` at any time, by calling reset:
You might wonder: why does the type of this control include `null`? This is because the control can become `null` at any time, by calling reset:
```ts
const email = new FormControl('angularrox@gmail.com');
@ -99,6 +99,13 @@ const names = new FormArray([new FormControl('Alex')]);
names.push(new FormControl('Jess'));
```
Pass an array of controls to `aliases.push()` when you need to add several entries at once.
```ts
const aliases = new FormArray([new FormControl('ng')]);
aliases.push([new FormControl('ngDev'), new FormControl('ngAwesome')]);
```
This `FormArray` will have the inner controls type `FormControl<string|null>`.
If you want to have multiple different element types inside the array, you must use `UntypedFormArray`, because TypeScript cannot infer which element type will occur at which position.
@ -124,11 +131,11 @@ As a consequence, the type of `login.value` is `Partial<{email: string, password
More specifically, the type of `login.value.email` is `string|undefined`, and TypeScript will enforce that you handle the possibly `undefined` value (if you have `strictNullChecks` enabled).
If you want to access the value *including* disabled controls, and thus bypass possible `undefined` fields, you can use `login.getRawValue()`.
If you want to access the value _including_ disabled controls, and thus bypass possible `undefined` fields, you can use `login.getRawValue()`.
### Optional Controls and Dynamic Groups
Some forms have controls that may or may not be present, which can be added and removed at runtime. You can represent these controls using *optional fields*:
Some forms have controls that may or may not be present, which can be added and removed at runtime. You can represent these controls using _optional fields_:
```ts
interface LoginForm {