Package Exports

ngxs-forms
ngxs-forms/bundles/ngxs-forms.umd.js
ngxs-forms/fesm2015/ngxs-forms.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ngxs-forms) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

ngxs-forms

This is fork of the best forms implementation for redux style stores. Original ngrx-forms uses @ngrx/store, this fork is updated to be used with @ngxs/store store.

Installation

npm install ngxs-forms --save

# or if you are using yarn
yarn add ngxs-forms

This library has a peer dependency on @angular/core, @angular/common, @angular/forms, and @ngxs/store, so make sure appropriate versions of those packages are installed.

Quick start

Add NgxsFormsModule.forRoot() to root app module

import { NgxsFormsModule } from 'ngxs-forms';
// ...

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    // ...
    NgxsFormsModule.forRoot()
  ],
  // ...
  bootstrap: [AppComponent]
})
export class AppModule { }

Define NGXS state

import { FormGroupState, createFormGroupState } from 'ngxs-forms';

// ...

interface FormModel {
  id: number;
  name: string;
  
  // ...
}

interface StateModel {
  loading: boolean;
  specialForm: FormGroupState<FormModel>;
  
  //...
}

const initialModelState: FormModel = {
  id: null,
  name: '',
  
  // ...
}

const SOME_FORM_ID = '[Some scope] Special form';
const initialSpecialFormState = createFormGroupState<FormModel>(SOME_FORM_ID, initialModelState);

const initialState: StateModel = {
  loading: false,
  specialForm: initialSpecialFormState
};

@State<StateModel>({
  name: 'someSpecialState',
  defaults: initialState
})
@Injectable()
export class SpecialState {
  
  // ...
}

Add NgxsFormsModule in feature module and use state in component (no special reducers needed)

// ...
@NgModule({
  declarations: [
    SomeComponent
  ],
  imports: [
    // ...
    NgxsFormsModule
  ],
})
export class SomeFeatureModule { }

// ...
@Component({
  selector: 'app-special',
  template: `
  <form novalidate [ngrxFormState]="(specialState$ | async).specialForm">
    <input type="text" [ngrxFormControlState]="(specialState$ | async).specialForm.controls.name"></input>
  </form>`,
})
export class SomeComponent implements OnInit {

  @Select(SpecialState) specialState$: Observable<StateModel>;

Documentation

Learn more about ngrx-forms at github or official ngrx-forms documentation or visit the example application.

Learn more about @ngxs/store store at github or visit homepage.

License

Everything in this repository is licensed under the MIT License unless otherwise specified.