refactor: pass form instance to form component, reset on save

src/app/pages/main/main.html

@@ -2,6 +2,7 @@
 <app-card bgColor="var(--secondary)">
     <app-contact-form 
         (contact)="save($event)"
+        [form]="form"
         [submitText]="strings.add"
         class="form" 
     ><app-form-header 

src/app/pages/main/main.ts

@@ -8,6 +8,7 @@ import { FormHeader } from '../../components/form-header/form-header';
 import { STRINGS_INJECTOR } from '../../app.config';
 import { UpperfirstPipe } from '../../pipes/upperfirst-pipe';
 import { MainHeader } from '../../components/main-header/main-header';
+import { FormGroupContact } from '../../utils/form-group-contact';
 
 @Component({
   selector: 'app-main',
@@ -16,10 +17,13 @@ import { MainHeader } from '../../components/main-header/main-header';
   styleUrl: './main.scss',
 })
 export class Main {
-  private readonly contactService = inject(ContactService);
+  protected readonly form = new FormGroupContact();
   protected readonly strings = inject(STRINGS_INJECTOR);
+  private readonly contactService = inject(ContactService);
 
   save(contactDTO: ContactDTO) {
-    this.contactService.save(contactDTO).subscribe();
+    this.contactService.save(contactDTO).subscribe({
+      next: () => this.form.reset(),
+    });
   }
 }