jaregu / ngxs-forms

Proper integration of forms in Angular applications using ngxs (forked from ngrx-forms)

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.

Original work Copyright (c) 2017-present Jonathan Ziller

Modified work Copyright 2018-present Mārcis Meijers