FormArray manages an ordered collection of form controls when the number of fields can change. Unlike FormGroup, its child controls do not need names: their positions identify them. A product editor can use one FormArray for keywords, starting with the product’s existing keywords and letting the user add or remove fields. section 22.2 section 22.2.1
The main operations work by position:
- Inspect controls with controls, length, or at(index). Add them with push(control) or insert(index, control); replace one with setControl(index, control). section 22.2.1
- Remove one with removeAt(index), or remove them all with clear(). section 22.2.1
- Set values with arrays rather than name–value maps. setValue requires a value for every control; patchValue tolerates missing or extra values. section 22.2.1
A variable-length keyword editor
Create the keyword FormControl objects through one helper, then place their FormArray under the keywords property of the product FormGroup. When selecting a product, clear the array and create one control per existing keyword plus an empty control, so a product without keywords still has a field. Render keywordGroup.controls in a template loop; use each loop index with [formControlName] to bind its input. An Add button can call push(createKeywordFormControl()), while a Delete button can call removeAt(index). Show Delete only when more than one field remains. section 22.2.1 section 22.2.2
The control-creation helper is also a single place to set validation. For example, a pattern validator can reject disallowed characters in every keyword field. When displaying an individual error, address the control by its array position, such as keywords.0; a wrong index shows the message for a different field. A validator on the FormArray itself can check across fields, such as rejecting duplicate keywords. section 22.2.3 section 22.3.2
An optional empty field also contributes an empty string when form values are submitted. Requiring every field to be filled would force users to delete unused fields. A FilteredFormArray example excludes empty strings and nulls instead, but it overrides _updateValue, an internal method absent from the public type declarations. That approach depends on Angular internals that may change; treat it as a trade-off, not an ordinary FormArray operation. section 22.2.4
Table 22.2. Useful FormArray members for managing controls
|
Name
|
Description
|
|
controls
|
This property returns an array containing the child controls.
|
|
length
|
This property returns the number of controls that are in the
FormArray.
|
|
at(index)
|
This property returns the control at the specified index in the
FormArray.
|
|
push(control)
|
This method adds a control to the end of the array.
|
|
insert(index, control)
|
This method inserts a control at the specified index.
|
|
setControl(index, control)
|
This method replaces the control at the specified index.
|
|
removeAt(index)
|
This method removes the control at the specified index.
|
|
clear()
|
This method removes all of the controls from the
FormArray.
|
Use the control-management table to choose between inspecting, inserting, replacing, and removing controls. section 22.2.1
