# Reactive Forms — Angular

Source: https://www.geekswithgeeks.com/en/angular/ng-reactive-forms

> Build the form model explicitly in TypeScript.

## FormGroup & FormControl

A `FormGroup` bundles several `FormControl`s. It's defined and driven from the component class.

```typescript
import { FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';

@Component({ standalone: true, imports: [ReactiveFormsModule], template: `...` })
export class SignupComponent {
  form = new FormGroup({
    email: new FormControl(''),
    password: new FormControl(''),
  });

  onSubmit() {
    console.log(this.form.value);
  }
}
```

## Binding it in the template

`[formGroup]` connects the template to the model; `formControlName` links each input to its control.

```html
<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <input formControlName="email">
  <input formControlName="password" type="password">
  <button type="submit">Sign up</button>
</form>
```

## When to choose it

Reactive forms scale better for complex, dynamic, or heavily-tested forms — the model is explicit and easy to unit test.