fix(forms): make NgForm emit FormSubmittedEvent and FormResetEvent (#60887)

gabrielbergoc · pkozlowski-opensource · commit be995623cd96 · 2025-04-22T13:04:40.000+02:00
Currently, only forms created with `FormGroupDirective` emit events on form submission and resetting. This commit extends this behavior to Template-driven forms also. Related to #58894 PR Close #60887
diff --git a/packages/core/test/bundling/forms_template_driven/bundle.golden_symbols.json b/packages/core/test/bundling/forms_template_driven/bundle.golden_symbols.json
@@ -78,6 +78,8 @@
   "EventManagerPlugin",
   "FormControl",
   "FormGroup",
+  "FormResetEvent",
+  "FormSubmittedEvent",
   "FormsExampleModule",
   "FormsModule",
   "INJECTOR",
diff --git a/packages/forms/src/directives/ng_form.ts b/packages/forms/src/directives/ng_form.ts
@@ -22,7 +22,12 @@ import {
   ɵWritable as Writable,
 } from '@angular/core';
 
-import {AbstractControl, FormHooks} from '../model/abstract_model';
+import {
+  AbstractControl,
+  FormHooks,
+  FormResetEvent,
+  FormSubmittedEvent,
+} from '../model/abstract_model';
 import {FormControl} from '../model/form_control';
 import {FormGroup} from '../model/form_group';
 import {
@@ -338,6 +343,7 @@ export class NgForm extends ControlContainer implements Form, AfterViewInit {
     this.submittedReactive.set(true);
     syncPendingControls(this.form, this._directives);
     this.ngSubmit.emit($event);
+    this.form._events.next(new FormSubmittedEvent(this.control));
     // Forms with `method="dialog"` have some special behavior
     // that won't reload the page and that shouldn't be prevented.
     return ($event?.target as HTMLFormElement | null)?.method === 'dialog';
@@ -360,6 +366,7 @@ export class NgForm extends ControlContainer implements Form, AfterViewInit {
   resetForm(value: any = undefined): void {
     this.form.reset(value);
     this.submittedReactive.set(false);
+    this.form._events.next(new FormResetEvent(this.form));
   }
 
   private _setUpdateStrategy() {
diff --git a/packages/forms/test/directives_spec.ts b/packages/forms/test/directives_spec.ts
@@ -11,6 +11,7 @@ import {fakeAsync, flushMicrotasks, tick} from '@angular/core/testing';
 import {
   AbstractControl,
   CheckboxControlValueAccessor,
+  ControlEvent,
   ControlValueAccessor,
   DefaultValueAccessor,
   FormArray,
@@ -21,15 +22,20 @@ import {
   FormGroup,
   FormGroupDirective,
   FormGroupName,
+  FormResetEvent,
+  FormSubmittedEvent,
   NgControl,
   NgForm,
   NgModel,
   NgModelGroup,
   SelectControlValueAccessor,
   SelectMultipleControlValueAccessor,
+  StatusChangeEvent,
+  TouchedChangeEvent,
   ValidationErrors,
   Validator,
   Validators,
+  ValueChangeEvent,
 } from '../index';
 import {selectValueAccessor} from '../src/directives/shared';
 import {composeValidators} from '../src/validators';
@@ -431,6 +437,37 @@ describe('Form Directives', () => {
 
       expect(f.form.errors).toEqual({'async': true});
     }));
+
+    describe('events emissions', () => {
+      it('formControl should emit an event when resetting a form', () => {
+        const f = new NgForm([], []);
+        const events: ControlEvent[] = [];
+
+        f.form.events.subscribe((event) => events.push(event));
+        f.resetForm();
+
+        expect(events.length).toBe(4);
+        expect(events[0]).toBeInstanceOf(TouchedChangeEvent);
+        expect(events[1]).toBeInstanceOf(ValueChangeEvent);
+        expect(events[2]).toBeInstanceOf(StatusChangeEvent);
+
+        // The event that matters
+        expect(events[3]).toBeInstanceOf(FormResetEvent);
+        expect(events[3].source).toBe(f.form);
+      });
+
+      it('formControl should emit an event when submitting a form', () => {
+        const f = new NgForm([], []);
+        const events: ControlEvent[] = [];
+
+        f.form.events.subscribe((event) => events.push(event));
+        f.onSubmit({} as any);
+
+        expect(events.length).toBe(1);
+        expect(events[0]).toBeInstanceOf(FormSubmittedEvent);
+        expect(events[0].source).toBe(f.form);
+      });
+    });
   });
 
   describe('FormGroupName', () => {
