How do I keep form state in Lazy Loading Module of Angular?

Question

I have build 2 route in my Angular 7 apps,

{
    path: 'create',
    component: CreateComponent
},
{
    path: 'view',
    component: ViewComponent
}

they are both lazily loaded, in CreateComponent there is a form with many form fields in it, and same thing happen with the ViewComponent.

The problem is, whenever i go to /view route or ViewComponent from /create route or CreateComponent, all of the form fields inside previous component (i.e. ViewComponent) were returned to initial state (i check it by returning to /create route again), in other word the form fields got automatically reset, and the same thing happened if I went from /view route to /create route, all the form fields in /view were reset by angular automatically.

So, how to fix this problem? I want to keep all the form fields keep its previous value (even though the form weren't submitted yet) if i change or go to another routes.

Thanks,

nayakam · Answer 1 · 2018-12-20T05:00:52.493

Main thing to note here, When you navigate away angular component destroyed then navigate back it is recreated again. There are several ways to maintain component data.

Use services to store the data and reuse when component initialised again -
Store data in local storage and reuse when component initialised again
RouteReuseStrategy. This provide mechanism to reuse angular components. Note that this wouldn't work with sibling router outlets. May be, I couldn't make it work for sibling routes. You can refer to my previous answer related to implementing RouteReUseStrategy

score 0 · Answer 2 · answered Dec 20 '18 at 05:02

This has nothing to do with lazy loading, e.g assuming you are using reactive controls in your form,

userForm: FormGroup
constructor (private fb: FormBuilder) {}
ngOnInIt() {
 this.userForm = this.fb.group({
 firstName: [null, Validators.required],
 lastName: [null, Validators.required]
});
}

Whenever you reload this component, first Lifecycle hook which is called is ngOnInIt() {} so your form will be again reinitialized, storing the value of firstName and lastName as null.

Solution: Create a new Class

export class User {
firstName: string,
lastName: string

constructor (data) {
  this.firstName = data.firstName ? data.firstName : '';
  this.lastName = data.lastName ? data.lastName : '';
 }
}

Using Above Class to create a reactive control. if you have stored your user data somewhere fetch it via services create a new user and pass the same to controls.

userForm: FormGroup
user: User
constructor(private someService: SomeService, private fb: FormBuilder) {}

ngOnInIt() {
 //get User some random function which makes an api call and fetches user data 
 //if available else returns {} 
 this.someService.getUser((res) => {
  this.user = new User(res);
  this.createForm();
 });
}

createForm() {
 this.userForm = this.fb.group({
  firstName: [this.user.firstName, Validators.required],
  lastName: [this.user.lastName, Validators.required]
})
}

//with user = new User(res); if there is a res.firstName field in it it will add it to user else will set it as the empty string.

Hope this helps, this should fix the issue

How do I keep form state in Lazy Loading Module of Angular?

2 Answers2