# 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*](https://vytautaspranskunas.gitbook.io/react-state-rxjs/core-concepts/store/form-manager-plugin/custom-form-elements)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://vytautaspranskunas.gitbook.io/react-state-rxjs/core-concepts/store/form-manager-plugin.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.