# vue-rx-form

> A vue reactive form

Latest version **1.0.22** (published 2019-07-28) · ISC license · 0 weekly downloads

## Install

```sh
npm install vue-rx-form
pnpm add vue-rx-form
yarn add vue-rx-form
bun add vue-rx-form
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.22 |
| Published | 2019-07-28 |
| First published | 2019-04-04 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 66.2 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | victor1135 |

## Links

- npm: https://www.npmjs.com/package/vue-rx-form
- npm.io page: https://npm.io/package/vue-rx-form

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^2.6.10
- [rxjs](https://npm.io/package/rxjs.md) ^6.4.0

## Recent versions

- 1.0.22 (latest) — 2019-07-28
- 1.0.21 — 2019-07-28
- 1.0.20 — 2019-07-28
- 1.0.19 — 2019-07-28
- 1.0.18 — 2019-07-28
- 1.0.17 — 2019-07-28
- 1.0.16 — 2019-07-28
- 1.0.15 — 2019-07-28
- 1.0.14 — 2019-07-14
- 1.0.13 — 2019-07-14
- 1.0.12 — 2019-07-01
- 1.0.11 — 2019-07-01
- 1.0.10 — 2019-07-01
- 1.0.9 — 2019-06-26
- 1.0.8 — 2019-06-22
- … 7 more at https://npm.io/package/vue-rx-form/versions

## README

# vue-reactive-form

## Project setup
```
npm install vue-rx-form --save
```

# Usage

## Table of Contents
* [Basic Implement](##Basic-Implement)
  * [Step1 Importing a new form control](###Step1-Importing-a-new-form-control)
  * [Step2 Using directive in a component](###Step2-Using-directive-in-a-component)
  * [Step3 Creating a FormGroup instance](###Step3-Creating-a-FormGroup-instance)
  * [Step4 Associating the FormControl model and view](###Step4-Associating-the-FormControl-model-and-view)
  * [Step5 Get form data](##Step5-Get-form-data)

* [Form Validation](##Form-Validation)
  * [Add Validator](###Add-Validator)
* [Reactive Forms](##Reactive-Forms)
  * [Listening for Changes](###Listening-for-Changes)

## Basic Implement

### Step1 Importing a new form control
```JavaScript
import { FormGroup, FormControl, FormControlName, Validators } from 'vue-rx-form';
```

### Step2 Using directive in a component
```JavaScript
@Component({
  directives: {
    FormControlName
  }
})
```

### Step3 Creating a FormGroup instance
```JavaScript
profileForm = new FormGroup({
    name: new FormControl(''),
    email: new FormControl(''),
});
```

### Step4 Associating the FormControl model and view
```HTML
  <div>
    <label>
      Name:
      <input type="text" v-formControlName="profileForm.controls.name" />
    </label>

    <label>
      Email:
      <input type="text" v-formControlName="profileForm.controls.email" />
    </label>
    <button :click="onSubmit" :disabled="!profileForm.valid">Submit</button>
  </div>
```
### Step5 Get form data
```Javascript
onSubmit() {
  console.log(this.profileForm.value);
}
```
## Form Validation
### Add Validator
```Javascript
  profileForm: FormGroup = new FormGroup({
      name: new FormControl('', [Validators.required]),
      email: new FormControl('', [Validators.required, Validators.email])
  });
```

```HTML
  <div>
    <label>
      Name:
      <input type="text" v-formControlName="profileForm.controls.name" />
      <span v-show="!profileForm.controls.name.valid">{{ profileForm.controls.name.errors }}</span>
    </label>

    <label>
      Email:
      <input type="text" v-formControlName="profileForm.controls.email" />
    </label>
      <span v-show="!profileForm.controls.email.valid">{{ profileForm.controls.email.errors }}</span>
    <button :click="onSubmit" :disabled="!profileForm.valid">Submit</button>
  </div>
```

![image](https://drive.google.com/uc?export=view&id=18Fnst_AUOtWSgCQr4_9gs-Idw7i74GK0)


## Reactive Forms
### Listening for Changes
```Javascript
myForm: FormGroup;
formattedMessage: string;

formBuilder: FormBuilder = new FormBuilder();

created() {
  this.myForm = this.formBuilder.group({
    name: ['', Validators.required],
    email: ['', [Validators.required, Validators.email]],
    message: ''
  })

  this.onChanges();
}
```

Notice how we call an onChanges method in the created lifecycle hook after having initialized our form. Here’s the content of our onChanges method:

```Javascript
onChanges() {
  this.myForm.valueChanges.subscribe(val => {
    this.formattedMessage =
    `Hello,

    My name is ${val.name} and my email is ${val.email}.

    I would like to tell you that ${val.message}.`;
  });
}
```
You can also listen for changes on specific form controls instead of the whole form group:

```Javascript
onChanges() {
  this.myForm.get('name').valueChanges.subscribe(val => {
    this.formattedMessage = `My name is ${val}.`;
  });
}
```

---
_Source: https://npm.io/package/vue-rx-form · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._