Angular’s forms API creates reactive forms managed in a component class rather than primarily through template directives. It takes more work than a template-driven form, but gives the component finer control over values, interaction state, and validation. FormControl represents one element; FormGroup collects controls so they can also be managed together. section 21.0 section 21.2
Start with one control
Import ReactiveFormsModule, create `nameField = new FormControl({value: "", disabled: false})` in the component, and bind an input with `[formControl]="nameField"`. The directive connects the HTML element to the control object; `nameField.setValue(...)` then updates its value from code. This binding replaces `ngModel` for the reactive control. section 21.3
Once the control is connected, manage behavior in code:
- Read `value`, call `setValue` or `reset`, enable or disable the control, and observe edits through `valueChanges`. section 21.3
- Inspect `touched`, `dirty`, and related state, or change it explicitly with methods such as `markAsPristine()`. Those states affect the classes Angular applies to the element. section 21.3.2
- Configure rules with `Validators` in the control options, then inspect `errors` or subscribe to `statusChanges`. A template can use the control’s validation state to display useful messages. section 21.3.3
For a larger form, put named controls in a FormGroup. Its value methods work with an object keyed by control name, and its validation status reflects the controls it contains. Bind the group with `[formGroup]` and its inputs with `formControlName`; the template can still handle submission, reset, and a disabled submit button while the component owns the controls. section 21.4 section 21.4.2
Table 21.9. FormGroup methods for managing control values
|
Name
|
Description
|
|
value
|
This method returns an object containing the values of the form controls in the group, using the names given to each control as the names of the properties.
|
|
setValue(val)
|
This method sets the contents of the form controls using an object, whose property names correspond to the names given to each control. The specified value object must define properties for all the form controls in the group.
|
|
patchValue(val)
|
This method sets the contents of the form controls using an object, whose property names correspond to the names given to each control. Unlike the
setValue method, values are not required for all form controls.
|
|
reset(val)
|
This method resets the form to its pristine and untouched state and uses the specified value to populate the form controls.
|
Compare `setValue`, which requires values for every control, with `patchValue`, which accepts a subset; `reset` also restores pristine and untouched state. section 21.4
Use this API when component-level customization justifies its added complexity. Validation behavior needs deliberate setup; dynamic controls and custom or asynchronous validators are further steps, not prerequisites for a basic reactive form. section 21.0 section 21.5 section 21.3.3
