From de2e59c7b84c538157e507529e618de4ffaa5ba6 Mon Sep 17 00:00:00 2001
From: Shahar Kazaz <shahar.kazaz@gmail.com>
Date: Wed, 22 Mar 2023 13:47:42 +0200
Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=90=9B=20form=20action=20submit=20?=
 =?UTF-8?q?and=20reset=20behaviour?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

BREAKING CHANGE: Resetting a form will now clear all the errors and reset the submit
state
---
 .../src/lib/form-action.directive.spec.ts     | 21 +++---------
 .../src/lib/form-action.directive.ts          | 32 +++++++------------
 src/styles.scss                               |  4 +--
 3 files changed, 19 insertions(+), 38 deletions(-)

diff --git a/projects/ngneat/error-tailor/src/lib/form-action.directive.spec.ts b/projects/ngneat/error-tailor/src/lib/form-action.directive.spec.ts
index 33366c9..cb0d02e 100644
--- a/projects/ngneat/error-tailor/src/lib/form-action.directive.spec.ts
+++ b/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;
 
diff --git a/projects/ngneat/error-tailor/src/lib/form-action.directive.ts b/projects/ngneat/error-tailor/src/lib/form-action.directive.ts
index e6b3076..59a3a4b 100644
--- a/projects/ngneat/error-tailor/src/lib/form-action.directive.ts
+++ b/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);
   }
 }
diff --git a/src/styles.scss b/src/styles.scss
index 98e4cac..bbbc48a 100644
--- a/src/styles.scss
+++ b/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);
   }