Reactive forms data not clear when coming back

Question

Problem 1:

I noticed that the ngOnInit()method and constructor gets not called when I come back to the page which is already instanced. I have to use any other method for this? I need a method which is called every time when he is visiting the specific page.

Problem 2:

Login forms fields data not getting clear when coming back from home to login page

What is the problem?

login.ts

export class LoginPage {

    loginForm: FormGroup;

    constructor(private navCtrl: NavController) {
        this.loginForm = new FormGroup({
            username: new FormControl('', [Validators.required]),
            password: new FormControl('', [Validators.required]),
        });
    }

    login(): void {
        this.navCtrl.navigateForward('/menu');
    }
}

login.html

<ion-content>
  <div class="login-container">
    <div class="container-fluid p-0">
      <div class="row justify-content-center no-gutters">
        <div class="col-lg-4 col-sm-12 col-md-6">
          <ion-card class="login-fancy">

            <form [formGroup]="loginForm">

              <ion-item>
                <ion-label class="no-padding" position="floating">Username</ion-label>
                <ion-input type="text" formControlName="username"
                  class="form-controll" required></ion-input>
              </ion-item>
              <div class="error-message-div"
                *ngIf="loginForm.get('username').hasError('required') && loginForm.get('username').touched">
                <div class="error"
                  *ngIf="loginForm.get('username').hasError('required') && loginForm.get('username').touched">
                  Username is required
                </div>
              </div>

              <ion-item>
                <ion-label class="no-padding" position="floating">Password</ion-label>
                <ion-input type="text" formControlName="password"
                  class="form-controll" required></ion-input>
              </ion-item>
              <div class="error-message-div"
                *ngIf="loginForm.get('password').hasError('required') && loginForm.get('password').touched">
                <div class="error"
                  *ngIf="loginForm.get('password').hasError('required') && loginForm.get('password').touched">
                  Password is required
                </div>
              </div>

              <div class="mt-4">
                <button type="submit" class="btn btn-primary btn-block" [disabled]="loginForm.invalid"
                  (click)="login()">Login</button>
              </div>

              <div class="row d-flex justify-content-center mt-3 mb-0">
                <label><a href="#" class="">Set Password?</a></label>
              </div>
            </form>

          </ion-card>

        </div>
      </div>
    </div>
  </div>
</ion-content>

Answer 1

you can call ionViewDidLoad() method which calls each time when you page gets loaded so instead of using constructor you can do something like this

.
.

    ionViewDidLoad(){
    this.loginForm = new FormGroup({
                username: new FormControl('', [Validators.required]),
                password: new FormControl('', [Validators.required]),
            });
    }
.
.

Answer 2

Problem 1:

If this second page is a child component (I suppose it is), you could declare public method with all necessary behavior inside this child component. And then use ViewChild decorator in parent component. This way you will gave an ability to call mentioned above method before navigating to child component ("method which is called everytime when he is visiting the specific page"). This is one way. Other way is to use Input binding. See more on component interaction here

Problem 2:

If this problem with LoginPage component is connected with your first problem (so that Login component is a child of Home component), you can, for example, manually reset form before (or after) navigation away in login() method:

    login(): void {
        this.navCtrl.navigateForward('/menu');
        this.loginForm.reset();
}

Answer 3

Instead of

this.navCtrl.navigateForward('/menu');

You may need to

this.navCtrl.navigateRoot('/menu');

The reason of this is that when you do the former, the original view is not destroyed, it is just hidden from view behind the new one.

Take a look at this blog post

Answer 4

You can reset your form when your component will destroy.

 ionViewWillUnload() {
   this.loginForm.reset();
 }

Answer 5

It is caused actually by this: https://web.dev/bfcache/ .All browsers have it and it manifests randomly, depending on the size of the cache available relative to the page being loaded. The solution is to use the event 'pageshow'.

OnNavigateAway()
{
//......
        const bOnShowFromCache = (event) => {
        if (event.persisted === true) {
          //Call NgInit() here explicitly or force a page reload 

        window.removeEventListener('pageshow',bOnShowFromCache);
        }
      };
      window.addEventListener('pageshow',bOnShowFromCache);

      //redirect to an external page
      window.location = "url to navigate to";
     //do not add any code after this, it will get ignored (skipped)
}