Angular .NET SPA- Reactive form doesn't clear values when user navigates away from page

My front end app architecture currently looks something like this:

<app root> <router-outlet></router-outlet> </app root>

The router-outlet starts with the default path pointing to a child component called IdRequestFormComponent:

export class NetIdRequestFormComponent implements OnInit, OnDestroy {


constructor(private fb: FormBuilder, private http: HttpClient, private router: Router) {

//this.router.routeReuseStrategy.shouldReuseRoute = () => {
// return false;
//};

this.netIdRequestForm = this.fb.group({
// controls initialized
});

ngOnDestroy(): void {
this.netIdRequestForm.reset();
}


<form [formGroup]="netIdRequestForm" (ngSubmit)="onSubmit()">
<div class="mb-3 border border-light">
<div class="panel-heading mb-3">General Information</div>
<div class="mb-3 px-3">
<label class="form-label fw-bold">Requesting access for:</label>
<div class="d-flex">
<div class="form-check px-4">
<input type="radio" class="form-check-input" name="accessFor" formControlName="accessFor" value="Myself" />
<label class="form-check-label" for="accessFor">
Myself
</label>
</div>
<div class="form-check px-4">
<input type="radio" class="form-check-input" name="accessFor" formControlName="accessFor" value="Someone else" />
<label class="form-check-label" for="accessFor">
Someone else
</label>
</div>
</div>

<p *ngIf="this.pressedSubmit && netIdRequestForm.get('accessFor')?.errors" class="mb-3 text-danger"> Select one. </p>
</div>
</div>
<!--More fields... -->
</form>


Router outlet by default displays a child component called IdRequestFormComponent. This component contains html/ts code to display a Reactive form (form group, former builder, etc). I initialize this form using the class constructor. It works well overall.

My issue currently: form data within the IdRequestFormComponent isn't cleared under every circumstance where the view is navigated away from.

It currently clears if:

1. page is refreshed
2. data is properly submitted (passes validation) and then user navigates backwards

Data does not clear if:

1. user interacts with href link in navigation bar. Nav bar is currently written in the app root component.
2. In local host, if I type in any website, then navigate backwards

The worst part of is that NgIf directives in the IdRequestFormComponent HTML are not acknowledged if user enters data to trigger it true, navigates away using href, then users the browser back space. Data is still there, but ngIf evaluates to false.

Any input is welcomed, and I can provide more code/architecture description as needed. Thank you.

Tried using ngOnDestroy to call form.reset, but it did not seem to hit the breakpoint set in that function.

Also tried using canDeactivate with a custom class within the routing class, but also did not seem to see a change in behavior. It is also possible that I implemented this incorrectly:

const routes: Routes = [
{ path: '', component: NetIdRequestFormComponent, canDeactivate: [DeactivationGuard]},
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

___________________________________

@Injectable()
export class DeactivationGuard implements CanDeactivate<any> {
canDeactivate(component: any, currentRoute: ActivatedRouteSnapshot, currentState: RouterStateSnapshot, nextState: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
const confirmation = confirm('Are you sure you wish to navigate away with unsaved data?'); // this browser confirmation never gets called!!!
console.log("we are deactivating");
if (confirmation) return true;
else return false;
}

}


As seen by the comment within the code, the browser API confirm is not called when navigating away, as it would be expected. I did make sure to add DeactivationGuard to providers within app.module.ts.

Continue reading...