import { Directive , HostListener , Inject , Input , OnInit , Optional } from '@angular/core' ; import { ActionsSubject } from '@ngrx/store' ; import { Actions , MarkAsSubmittedAction } from '../actions' ; import { FormGroupState } from '../state' ; interface CustomEvent extends Event { } @ Directive ( { selector : 'form:not([ngrxFormsAction])[ngrxFormState]' , } ) export class NgrxFormDirective < TStateValue > implements OnInit { @ Input ( 'ngrxFormState' ) state : FormGroupState < TStateValue > ; constructor ( @ Optional ( ) @ Inject ( ActionsSubject ) private actionsSubject ) { this . actionsSubject = actionsSubject ; } protected dispatchAction ( action ) { if ( this . actionsSubject !== null ) { this . actionsSubject . next ( action ) ; } else { throw new Error ( 'ActionsSubject must be present in order to dispatch actions!' ) ; } } ngOnInit ( ) { if ( ! this . state ) { throw new Error ( 'The form state must not be undefined!' ) ; } } @ HostListener ( 'submit' , [ '$event' ] ) onSubmit ( event ) { event . preventDefault ( ) ; if ( this . state . isUnsubmitted ) { this . dispatchAction ( new MarkAsSubmittedAction ( this . state . id ) ) ; } } }