> For the complete documentation index, see [llms.txt](https://vytautaspranskunas.gitbook.io/react-state-rxjs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://vytautaspranskunas.gitbook.io/react-state-rxjs/core-concepts/store/form-manager-plugin.md).

# Form manager plugin

This plugin simplifies working with HTML forms. It keeps in sync state and form values. To do this you need to access store from actions:

```typescript
this.formStateManager = this.action.store.form
            .bind(this.form.current)
            .sync();
```

or from imported `Store` 

```typescript
this.formStateManager = Store.store.select(['form']).form
            .bind(this.form.current)
            .onChange(state => this.forceUpdate())
            .sync();
```

*Please note that to keep view updated we are adding `onChange` callback and updating view which is not necessary if you accessing store from actions.*

from now on all changes made in state will be reflected in form and visa-versa.

Form plugin returns object with two methods:

* **Reset** - resets form to initial state
* **Destroy** - method that should be called from your ngOnDestroy method

As a second parameter of `bind` method some parameters can be passed:

* **debounceTime** - time to wait until changes are synced. **Default**: **100ms**

*Please note that input element **type="file"** is not synced. For this you will need to write custom element. See section* [*Custom form elements*](/react-state-rxjs/core-concepts/store/form-manager-plugin/custom-form-elements.md)