### File

`src/lib/directives/form-submit.directive.ts`

### Extends

`ConfirmClick`

### Implements

`OnDestroy`

### Metadata

Selector | `[rxapFormSubmit]`
Standalone | `true`
exportAs | `rxapFormSubmit`

### Index

###### Properties

- Public afterSubmit
- disabled
- disableWhileSubmitting
- Public navigateAfterSubmit
- resetAfterSubmit
- submitting
- Public type

###### Methods

- Protected execute

###### Inputs

- disableWhileSubmitting

### Constructor

`constructor(formDirective: FormDirective, router: Router | null)`
Defined in src/lib/directives/form-submit.directive.ts:52

Parameters :

Name | Type | Optional
formDirective | `FormDirective` | No
router | `Router | null` | No

### Inputs

disableWhileSubmitting
Default value : `true`
Defined in src/lib/directives/form-submit.directive.ts:46

### Methods

Protected execute
`execute()`
Defined in src/lib/directives/form-submit.directive.ts:63
Returns : `void`

### Properties

Public afterSubmit
Default value : `output<any>()`
Defined in src/lib/directives/form-submit.directive.ts:44

disabled
Default value : `computed(() => this.disableWhileSubmitting() && this.submitting())`
Defined in src/lib/directives/form-submit.directive.ts:50

disableWhileSubmitting
Default value : `true`
Defined in src/lib/directives/form-submit.directive.ts:46

Public navigateAfterSubmit
Default value : `input<string[]>()`
Defined in src/lib/directives/form-submit.directive.ts:42

resetAfterSubmit
Default value : `input<boolean | '', boolean>(false, { transform: coerceBoolean })`
Defined in src/lib/directives/form-submit.directive.ts:40

submitting
Default value : `toSignal(this.formDirective.submitting$, { initialValue: false })`
Defined in src/lib/directives/form-submit.directive.ts:48

Public type
Default value : `input<'button' | 'submit' | 'reset'>('button')`
Defined in src/lib/directives/form-submit.directive.ts:38

    import {
      computed,
      Directive,
      Inject,
      input,
      OnDestroy,
      Optional,
      output,
    } from '@angular/core';
    import { toSignal } from '@angular/core/rxjs-interop';
    import { Router } from '@angular/router';
    import { ConfirmClick } from '@rxap/directives';
    import {
      clone,
      coerceBoolean,
    } from '@rxap/utilities';
    import { Subscription } from 'rxjs';
    import {
      take,
      tap,
    } from 'rxjs/operators';
    import { FormDirective } from './form.directive';

    @Directive({
      selector: '[rxapFormSubmit]',

      host: {
        '(click)': 'onClick()',
        '(confirmed)': 'onConfirm()',
        '[disabled]': 'disabled()',
        '[type]': 'type()',
      },
      standalone: true,
      exportAs: 'rxapFormSubmit',
    })
    export class FormSubmitDirective extends ConfirmClick implements OnDestroy {

      public type = input<'button' | 'submit' | 'reset'>('button');

      resetAfterSubmit = input<boolean | '', boolean>(false, { transform: coerceBoolean });

      public navigateAfterSubmit = input<string[]>();

      public afterSubmit = output<any>();

      disableWhileSubmitting = input(true);

      submitting = toSignal(this.formDirective.submitting$, { initialValue: false });

      disabled = computed(() => this.disableWhileSubmitting() && this.submitting())

      private subscription?: Subscription;

      constructor(
        @Inject(FormDirective) private readonly formDirective: FormDirective,
        @Optional()
        @Inject(Router)
        private readonly router: Router | null = null,
      ) {
        super();
      }

      protected execute() {
        this.formDirective.form.markAllAsDirty();
        this.formDirective.form.markAllAsTouched();
        this.formDirective.cdr.markForCheck();
        this.subscription = this.formDirective.rxapSubmit.pipe(
          take(1),
          tap(value => {
            const clonedValue = clone(value);
            this.afterSubmit.emit(clonedValue);
            if (this.resetAfterSubmit()) {
              this.formDirective.reset();
            }
            const navigateAfterSubmit = this.navigateAfterSubmit();
            if (Array.isArray(navigateAfterSubmit)) {

              if (!this.router) {
                throw new Error('Could not resolve the router!');
              }

              return this.router.navigate(navigateAfterSubmit);
            }
            return Promise.resolve();
          }),
        ).subscribe();
        this.formDirective.onSubmit(new Event('submit'));
      }

      public ngOnDestroy() {
        this.subscription?.unsubscribe();
      }

    }

# results matching ""

# No results matching ""