How to use @ngxs/form-plugin - 10 common examples
To help you get started, we’ve selected a few @ngxs/form-plugin examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
abritopach / angular-ionic-ngxs-movies / src / app / modals / movie-modal / movie.modal.ts View on Github 
dismiss(data?: any) {
// Using the injected ModalController this page
// can "dismiss" itself and pass back data.
// console.log('dismiss', data);
if (this.navParams.data.option === 'add') {
this.store.dispatch([
new UpdateFormValue({
value: data,
path: 'catalog.movieForm'
}),
new UpdateFormStatus({
status: 'PENDING',
path: 'catalog.movieForm'
})
]);
}
this.modalCtrl.dismiss(data);
}dismiss(data?: any) {
// Using the injected ModalController this page
// can "dismiss" itself and pass back data.
// console.log('dismiss', data);
if (this.navParams.data.option === 'add') {
this.store.dispatch([
new UpdateFormValue({
value: data,
path: 'catalog.movieForm'
}),
new UpdateFormStatus({
status: 'PENDING',
path: 'catalog.movieForm'
})
]);
}
this.modalCtrl.dismiss(data);
}import { NgModule } from '@angular/core';
import { NgxsModule } from '@ngxs/store';
import { NgxsReduxDevtoolsPluginModule } from '@ngxs/devtools-plugin';
import { NgxsFormPluginModule } from '@ngxs/form-plugin';
import { NgxsLoggerPluginModule } from '@ngxs/logger-plugin';
import { NgxsStoragePluginModule } from '@ngxs/storage-plugin';
import { NgxsWebsocketPluginModule } from '@ngxs/websocket-plugin';
// import { NgxsRouterPluginModule } from '@ngxs/router-plugin';
import { CounterState } from './counter/counter.state';
@NgModule({
imports: [
NgxsModule.forRoot([CounterState]),
NgxsReduxDevtoolsPluginModule.forRoot(),
NgxsFormPluginModule.forRoot(),
NgxsLoggerPluginModule.forRoot(),
NgxsStoragePluginModule.forRoot(),
NgxsWebsocketPluginModule.forRoot()
// TODO: https://github.com/angular/angular/issues/34191
// NgxsRouterPluginModule.forRoot()
]
})
export class StoreModule {}@NgModule({
declarations: [
AppComponent,
// GenreCarouselComponent,
],
imports: [
BrowserModule,
HttpClientModule,
AppRoutingModule,
IonicModule.forRoot(),
NgxsModule.forRoot([ MovieState ]),
NgxsStoragePluginModule.forRoot(),
NgxsReduxDevtoolsPluginModule.forRoot(),
NgxsLoggerPluginModule.forRoot(),
NgxsFormPluginModule.forRoot()
],
providers: [MoviesService, YoutubeApiService, SearchImageService],
bootstrap: [AppComponent]
})
export class AppModule {}imports: [
CommonModule,
HttpClientModule,
FontAwesomeModule,
MatSnackBarModule,
NgxPageScrollCoreModule.forRoot({ _logLevel: 3 }),
NavigatorModule.forRoot(defaultMenu),
// NOTE: NGXS: If you have feature modules they need to be imported after the root module.
NgxsModule.forRoot([MenuState, PreferenceState, ProfileState, AppState], {
developmentMode: !environment.production,
}),
NgxsStoragePluginModule.forRoot({
// FIXME: https://github.com/ngxs/store/issues/902
key: ['preference', 'app.installed', 'auth.isLoggedIn'],
}),
NgxsFormPluginModule.forRoot(),
NgxsWebsocketPluginModule.forRoot({
url: environment.WS_EVENT_BUS_URL,
}),
NgxsRouterPluginModule.forRoot(),
AuthModule.forRoot(),
// OidcModule.forRoot({
// providerConfig: { ...environment.auth, provider: OidcProvider.Keycloak },
// initConfig: {
// onLoad: OidcOnLoad.CheckSso,
// flow: OidcFlow.Standard,
// },
// resourceInterceptorConfig: {
// allowedUrls: [environment.API_BASE_URL, environment.DOCS_BASE_URL],
// },
// postLoginRedirectUri: environment.baseUrl + 'dashboard',
// postLogoutRedirectUri: environment.baseUrl + 'home',import { NgxsStoragePluginOptions } from '@ngxs/storage-plugin/src/symbols';
@NgModule({
providers: [
CoreService,
],
exports: [
ClarityModule,
ClrFormsNextModule,
],
imports: [
CommonModule,
HttpClientModule,
// NgxPageScrollModule,
NgxsModule.forRoot([]),
NgxsFormPluginModule.forRoot(),
NgxsRouterPluginModule.forRoot(),
ClarityModule,
ClrFormsNextModule,
GraphqlModule,
AuthModule,
I18nModule,
NgxsReduxDevtoolsPluginModule.forRoot({
disabled: environment.production,
}),
NgxsStoragePluginModule.forRoot({
key: 'auth.token',
}),
]
})
export class CoreModule {
constructor(clearMovieForm() {
console.log('clearMovieForm');
this.movieForm.reset();
this.store.dispatch([
new UpdateFormValue({
value: this.emptyMovie,
path: 'catalog.movieForm'
}),
new UpdateFormStatus({
status: '',
path: 'catalog.movieForm'
})
]);
}clearMovieForm() {
console.log('clearMovieForm');
this.movieForm.reset();
this.store.dispatch([
new UpdateFormValue({
value: this.emptyMovie,
path: 'catalog.movieForm'
}),
new UpdateFormStatus({
status: '',
path: 'catalog.movieForm'
})
]);
}import { NgModule } from '@angular/core';
import { NgxsModule } from '@ngxs/store';
import { CommonModule } from '@angular/common';
import { NgxsFormPluginModule } from '@ngxs/form-plugin';
import { NgxsLoggerPluginModule } from '@ngxs/logger-plugin';
import { NgxsReduxDevtoolsPluginModule } from '@ngxs/devtools-plugin';
import { NgxsRouterPluginModule } from '@ngxs/router-plugin';
import { TodosState } from '@integration/store/todos/todos.state';
import { TodoState } from '@integration/store/todos/todo/todo.state';
import { environment as env } from '../../environments/environment';
@NgModule({
imports: [
CommonModule,
NgxsFormPluginModule.forRoot(),
NgxsLoggerPluginModule.forRoot({ logger: console, collapsed: false }),
NgxsReduxDevtoolsPluginModule.forRoot({ disabled: env.production }),
NgxsRouterPluginModule.forRoot(),
NgxsModule.forRoot([TodosState, TodoState], { developmentMode: !env.production })
],
exports: [
NgxsFormPluginModule,
NgxsLoggerPluginModule,
NgxsReduxDevtoolsPluginModule,
NgxsModule
]
})
export class NgxsStoreModule {}import { NgModule } from '@angular/core';
import { NgxsModule } from '@ngxs/store';
import { NgxsReduxDevtoolsPluginModule } from '@ngxs/devtools-plugin';
import { NgxsFormPluginModule } from '@ngxs/form-plugin';
import { NgxsLoggerPluginModule } from '@ngxs/logger-plugin';
import { NgxsStoragePluginModule } from '@ngxs/storage-plugin';
import { NgxsWebsocketPluginModule } from '@ngxs/websocket-plugin';
import { NgxsRouterPluginModule } from '@ngxs/router-plugin';
import { AppState } from './app.state';
@NgModule({
imports: [
NgxsModule.forRoot([AppState]),
NgxsReduxDevtoolsPluginModule.forRoot(),
NgxsFormPluginModule.forRoot(),
NgxsLoggerPluginModule.forRoot(),
NgxsStoragePluginModule.forRoot(),
NgxsWebsocketPluginModule.forRoot(),
NgxsRouterPluginModule.forRoot()
],
exports: [NgxsModule]
})
export class StoreModule {}
