# Reactive

## List of Forms

- [Prototype](/content/forms/prototype/index.html)
- [form-control](/content/forms/form-control/index.html)
- [form-control-class](/content/forms/form-control-class/index.html)
- [form-group](/content/forms/form-group/index.html)
- [form-builder](/content/forms/form-builder/index.html)
- [form-builder-nested](/content/forms/form-builder-nested/index.html)
- [form-array](/content/forms/form-array/index.html)
- [form-multi](/content/forms/form-multi/index.html)

## Template Driven

- [single](/content/forms/single/index.html)
- [multi](/content/forms/multi/index.html)
- [init-class](/content/forms/init-class/index.html)

# Form Control
## Form Group
## Form Builder

### Result With formControl

**ExampleForm1 : Value**

```
name : "Darth Vader"
email : "darthvader@starwars.com"
job : "Sith"
comment : "Father of Luke Skywalker"
```

### Reactive Form with FormControl

- Name
- Email
- Job
  - Jedi
  - Sith
- Comment

- SetValue
- Reset

### Result with FormGroup & FormControl

**ExampleForm2 : Value**

```
{
  "name": "",
  "email": "",
  "job": "",
  "comment": ""
}
```

### Reactive Form with FormGroup & FormControl

- Name
- Email
- Job
  - Jedi
  - Sith
- Comment

| Friends |
| --- |

- SetValue
- PatchValue
- Reset

### Result with FormBuilder

**ExampleForm3 : Value**

`[object Object]`

### Reactive Form with FormBuilder

- Name
- email
- Job
  - Jedi
  - Sith
- Comment

| Friends |
| --- |

- Load
- Reset