时间戳

首页 > 解决方案 > 返回时反应式表单数据不清楚

angular - 返回时反应式表单数据不清楚

问题描述

问题一：

我注意到当我回到已经实例化的页面时，没有调用 ngOnInit() 方法和构造函数。我必须为此使用任何其他方法吗？我需要一个每次访问特定页面时都会调用的方法。

问题2：

从家回到登录页面时，登录表单字段数据不清晰

问题是什么？

登录.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');
    }
}

登录.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>

标签： angularionic4

解决方案

代替

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

你可能需要

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

这样做的原因是，当你做前者时，原来的观点并没有被破坏，它只是隐藏在新的观点后面。

看看这篇博文

推荐阅读