fix: 🐛 form action submit and reset behaviour

BREAKING CHANGE: Resetting a form will now clear all the errors and reset the submit
state

projects/ngneat/error-tailor/src/lib/form-action.directive.spec.ts

@@ -1,10 +1,14 @@
 import { SpectatorDirective, createDirectiveFactory } from '@ngneat/spectator';
 
 import { FormActionDirective } from './form-action.directive';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
 
 describe('FormActionDirective', () => {
  let spectator: SpectatorDirective<FormActionDirective>;
- const createDirective = createDirectiveFactory(FormActionDirective);
+ const createDirective = createDirectiveFactory({
+ directive: FormActionDirective,
+ schemas: [NO_ERRORS_SCHEMA]
+ });
 
  beforeEach(() => {
  spectator = createDirective(`
@@ -21,21 +25,6 @@ describe('FormActionDirective', () => {
  expect(spectator.directive.element).toBe(form);
  });
 
- it('should emit submit when form is submitted and add class `form-submitted`', () => {
- let submitted = false;
-
- spectator.directive.submit$.subscribe({
- next: () => (submitted = true)
- });
-
- const form = spectator.query<HTMLButtonElement>('form');
-
- spectator.dispatchFakeEvent(form, 'submit');
-
- expect(submitted).toBeTrue();
- expect(form.classList.contains('form-submitted')).toBeTrue();
- });
-
  it('should emit reset when form is reset and remove class `form-submitted` after submit', () => {
  let reset = false;
 

projects/ngneat/error-tailor/src/lib/form-action.directive.ts

@@ -1,31 +1,23 @@
-import { Directive, ElementRef } from '@angular/core';
-import { fromEvent, Observable } from 'rxjs';
-import { shareReplay, tap } from 'rxjs/operators';
+import { Directive, ElementRef, OnInit } from '@angular/core';
+import { tap, fromEvent, Observable, Subject, takeUntil } from 'rxjs';
 
 @Directive({
  standalone: true,
  selector: 'form[errorTailor]'
 })
-export class FormActionDirective {
- submit$: Observable<Event> = fromEvent(this.element, 'submit').pipe(
- tap(() => {
- if (this.element.classList.contains('form-submitted') === false) {
- this.element.classList.add('form-submitted');
- }
- }),
- shareReplay({ refCount: true, bufferSize: 1 })
- );
+export class FormActionDirective implements OnInit {
+ private submit = new Subject<Event | null>();
+ private destroy = new Subject<void>();
 
- reset$: Observable<Event> = fromEvent(this.element, 'reset').pipe(
- tap(() => {
- this.element.classList.remove('form-submitted');
- }),
- shareReplay({ refCount: true, bufferSize: 1 })
- );
+ element = this.host.nativeElement;
+ submit$ = this.submit.asObservable();
+ reset$: Observable<Event> = fromEvent(this.element, 'reset').pipe(tap(() => this.submit.next(null)));
 
  constructor(private host: ElementRef<HTMLFormElement>) {}
 
- get element() {
- return this.host.nativeElement;
+ ngOnInit() {
+ fromEvent(this.element, 'submit')
+ .pipe(takeUntil(this.destroy))
+ .subscribe(this.submit);
  }
 }

src/styles.scss

@@ -9,9 +9,9 @@ body {
  color: #dc3545;
 }
 
-.on-submit.form-submitted,
+.on-submit.ng-submitted,
 form:not(.on-submit) {
- .ng-touched.ng-invalid {
+ .error-tailor-has-error .ng-invalid {
  border-color: #dc3545;
  padding-right: calc(1.5em + 0.75rem);
  }