@ngxs/form-plugin - npm Package Compare versions

Comparing version 2.0.0-dev.c8e2c93 to 2.1.0-beta.0

package.json

		{
		"name": "@ngxs/form-plugin",
		"description": "form plugin for @ngxs/store",
		"version": "2.0.0-dev.c8e2c93",
		"version": "2.1.0-beta.0",
		"peerDependencies": {
		"@ngxs/store": "2.1.0-beta.0",
		"@angular/core": "^5.0.0",
		"@angular/forms": "^5.0.0",
		"@ngxs/store": "2.0.0"
		"@angular/forms": "^5.0.0"
		},
		@@ -49,2 +49,2 @@ "main": "bundles/ngxs-form-plugin.umd.js",
		"homepage": "https://github.com/ngxs/store#readme"
		}
		}

104

README.md

		@@ -1,102 +0,2 @@
		# Form Plugin

		Often when building Reactive Forms in Angular, you need to bind values from the
		store to form and vice versus. The values from the store are observable and
		the reactive form accepts raw objects, as a result we end up monkey patching
		this back and forth.

		Binding the values is not the only thing we commonly do, its not un-typical
		to translate form dirty status or form errors. Typical workflows might include
		reading the errors from the form to show in various decoupled components or for
		use in our effects or using the form dirty status to prevent users from leaving
		a page without saving but without binding a variable we have no way to reset
		the status of the form after a successful save from an effect.

		In addition to these issues we encounter, there are workflows where you want
		to fill out a form and leave and then come back and resume your current status.
		This is an excellent use case for stores and we can conquer that case with this plugin.

		In a nutshell, this plugin helps to keep your forms and state in sync.

		### Configuration
		In the root module of your application, import `NgxsFormPluginModule`
		and include it in the imports.

		```TS
		import { NgxsFormPluginModule } from 'ngxs';

		@NgModule({
		imports: [
		NgxsModule.forRoot(states),
		NgxsFormPluginModule.forRoot(),
		]
		})
		export class AppModule {}
		```

		### Form State
		Define your default form state as part of your application state.

		```TS
		@State({
		name: "todos",
		defaults: {
		pizzaForm: {
		model: undefined,
		dirty: false,
		status: "",
		errors: {}
		}
		}
		})
		```

		### Form Setup
		In your component, you would implement the a reactive form and
		decorate the form with the `ngxsForm` directive with the path
		of your state object. We are passing the _string_ path to `ngxsForm`.
		The directive uses this path to connect itself to the store and setup bindings.

		```TS
		@Component({
		template: `
		<form [formGroup]="pizzaForm" novalidate (ngSubmit)="onSubmit()" ngxsForm="todos.pizzaForm">
		<input type="text" formControlName="toppings" />
		<button type="submit">Order</button>
		</form>
		`
		})
		export class PizzaComponent {
		pizzaForm = this.formBuilder.group({
		toppings: ['']
		});
		}
		```

		Now anytime your form updates, your state will also reflect the new state.

		The directive also has 2 inputs you can utilize as well:

		- `ngxsFormDebounce: number` - Debounce the value changes to the form. Default value: `100`.
		- `ngxsFormClearOnDestroy: boolean` - Clear the state on destroy of the form.

		### Actions
		In addition to it automatically keeping track of the form, you can also
		manually dispatch actions for things like resetting the form state. For example:

		```TS
		this.store.dispatch(
		new UpdateFormDirty({
		dirty: false, path: 'todos.pizzaForm'
		})
		);
		```

		The form plugin comes with following ```actions``` out of the box are:
		- `UpdateFormStatus({ status, path })` - Update the form status
		- `UpdateFormValue({ value, path })` - Update the form value
		- `UpdateFormDirty({ dirty, path })` - Update the form dirty status
		- `SetFormDisabled(path)` - Set the form to disabled
		- `SetFormEnabled(path)` - Set the form to enabled
		- `SetFormDirty(path)` - Set the form to dirty (shortcut for `UpdateFormDirty`)
		- `SetFormPristine(path)` - Set the form to prestine (shortcut for `UpdateFormDirty`)
		# @ngxs/forms-plugin
		Forms plugin for NGXS. See [repo](https://github.com/ngxs/store) for more info.

@ngxs/form-plugin - npm Package Compare versions

New alerts

Fixed alerts

Worsened metrics