> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/angular/angular/llms.txt
> Use this file to discover all available pages before exploring further.

# Forms Overview

> Introduction to Angular Forms and choosing between reactive and template-driven approaches

Angular provides two approaches to handling user input through forms: reactive forms and template-driven forms. Both approaches capture user input events from the view, validate the input, create a form model and data model to update, and provide a way to track changes.

## Choosing an Approach

<CardGroup cols={2}>
  <Card title="Reactive Forms" icon="code" href="/forms/reactive-forms">
    Provide direct, explicit access to the underlying form object model. More robust, scalable, reusable, and testable.
  </Card>

  <Card title="Template-Driven Forms" icon="file-code" href="/forms/template-driven">
    Rely on directives in the template to create and manipulate the underlying object model. Useful for simple forms.
  </Card>
</CardGroup>

## Key Differences

| Feature              | Reactive                             | Template-driven                 |
| -------------------- | ------------------------------------ | ------------------------------- |
| **Form model setup** | Explicit, created in component class | Implicit, created by directives |
| **Data model**       | Structured and immutable             | Unstructured and mutable        |
| **Data flow**        | Synchronous                          | Asynchronous                    |
| **Form validation**  | Functions                            | Directives                      |

## Common Building Blocks

Both approaches share underlying building blocks:

### FormControl

Tracks the value and validation status of an individual form control.

```typescript packages/forms/src/model/form_control.ts theme={null}
const control = new FormControl('initial value');
console.log(control.value); // 'initial value'
```

### FormGroup

Tracks the value and validity state of a group of FormControl instances.

```typescript packages/forms/src/model/form_group.ts theme={null}
const form = new FormGroup({
  firstName: new FormControl('Nancy'),
  lastName: new FormControl('Drew')
});
console.log(form.value); // {firstName: 'Nancy', lastName: 'Drew'}
```

### FormArray

Tracks the value and validity state of an array of FormControl, FormGroup, or FormArray instances.

```typescript packages/forms/src/model/form_array.ts theme={null}
const arr = new FormArray([
  new FormControl('Nancy'),
  new FormControl('Drew')
]);
console.log(arr.value); // ['Nancy', 'Drew']
```

## Form State Properties

All form controls track state that helps you understand the user interaction:

<AccordionGroup>
  <Accordion title="Value State">
    * `value`: The current value of the control
    * `valueChanges`: Observable that emits every time the value changes
  </Accordion>

  <Accordion title="Validation State">
    * `valid`: Whether the control passes all validators
    * `invalid`: Whether the control fails any validators
    * `errors`: Object containing validation errors, or `null`
    * `statusChanges`: Observable that emits status changes
  </Accordion>

  <Accordion title="User Interaction State">
    * `pristine`: User has not changed the value (opposite of `dirty`)
    * `dirty`: User has changed the value
    * `untouched`: User has not visited the control (opposite of `touched`)
    * `touched`: User has visited the control (blur event)
  </Accordion>

  <Accordion title="Disabled State">
    * `disabled`: Control is disabled and excluded from validation
    * `enabled`: Control is enabled
  </Accordion>
</AccordionGroup>

## FormBuilder

The `FormBuilder` service provides syntactic sugar to reduce boilerplate:

```typescript packages/forms/src/form_builder.ts theme={null}
import { FormBuilder } from '@angular/forms';

const fb = new FormBuilder();
const form = fb.group({
  firstName: ['Nancy'],
  lastName: ['Drew'],
  address: fb.group({
    street: [''],
    city: [''],
    state: [''],
    zip: ['']
  })
});
```

## Data Flow

<Steps>
  <Step title="View to Model">
    User types into an input element. The input element emits an "input" event with the latest value.
  </Step>

  <Step title="Control Value Accessor">
    The ControlValueAccessor listening for events on the form input element immediately relays the new value to the FormControl instance.
  </Step>

  <Step title="Value Changes">
    The FormControl instance emits the new value through the `valueChanges` observable.
  </Step>

  <Step title="Model to View">
    When the component updates the FormControl value, the change flows through the ControlValueAccessor to the native form element.
  </Step>
</Steps>

## Next Steps

<CardGroup cols={2}>
  <Card title="Reactive Forms" icon="code" href="/forms/reactive-forms">
    Learn about explicit form control with reactive forms
  </Card>

  <Card title="Template-Driven Forms" icon="file-code" href="/forms/template-driven">
    Learn about template-driven forms with ngModel
  </Card>

  <Card title="Form Validation" icon="shield-check" href="/forms/validation">
    Add validation to your forms
  </Card>
</CardGroup>