Javascript Ionc2/Angular2页面未反映更改

我正在使用Ionic2 rc4。我有一张登录表

如您所见，

登录

按钮被禁用

我的问题是只有当表单无效时才应该禁用它。但是，当表单有效时，即存在

电子邮件

和

密码

，则不应禁用该表单

当我输入

电子邮件

和

密码

时，它将保持禁用状态，但如果我关闭浏览器的焦点，然后返回浏览器，它将启用。这就好像页面没有刷新到正确的状态

问题

有没有办法在表单有效时立即启用此功能

loginemail.html

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Login</ion-title>
  </ion-navbar>
</ion-header>


<ion-content padding>

  <form [formGroup]="loginForm" (ngSubmit)="submit()">
    <ion-item>
      <ion-label floating>Email</ion-label>
      <ion-input type="text" formControlName="email" id="email" [(ngModel)]="personModel.emailAddress"></ion-input>
    </ion-item>
    <control-messages class="error-box" [control]="loginForm.controls.email"></control-messages>
    <ion-item>
      <ion-label floating>Password</ion-label>
      <ion-input type="password" formControlName="password" id="password"></ion-input>
    </ion-item>
    <control-messages class="error-box" [control]="loginForm.controls.password"></control-messages>
    <br/>
    <ion-buttons>
      <button ion-button class="form-button-text" type="submit" [disabled]="!loginForm.valid" block round>Sign In</button>
    </ion-buttons>
  </form>
  <br/><br/>
  <p (click)="forgotPassword()" class="small-text">Forgot email or password?</p>
  <br/><br/><br/><br/>
  <button ion-button color="light" (click)="register()" color="dark" clear block round class="form-button-text">Quick Sign up</button>

</ion-content>

---

尝试为电子邮件和密码字段设置名称

<ion-input type="text" formControlName="email" id="email" name="email" [(ngModel)]="personModel.emailAddress"></ion-input>

<ion-input type="password" formControlName="password" name="password" id="password"></ion-input>

---

这样，loginForm就可以引用这些元素以确保其有效性。

我也遇到了同样的问题。 看起来像是将firebase与Ionic 2一起使用，可以破坏表单、输入、按钮等

我已经为这个打开了一个窗口，我不是第一个

作为一种解决方法，我所做的是将对firebase的每个调用封装在一个promisse中（参见链接中的示例），并为我解决了这个问题。在app.components中使用

auth.onAuthStateChanged

也有一些问题，我还没有尝试过，但可能将其放在一个可观察对象中可能也是一个错误的想法

---

因此，问题在于使用firebase Promiss和ionic2/angular2，typescript Promiss工作正常，不会破坏你的应用程序。

谢谢你的建议。我曾尝试将

loginFirebaseUser

包装在

Promise

中，但仍然存在相同的问题。请参阅上面的更新。不幸的是，这没有什么区别。

                    return new Promise<any>(() => {
                        this.loginFirebaseUser(this.loginForm.value.email, this.loginForm.value.password).then((authData) => {
                            let user: firebase.User = this.fireAuth.currentUser;
                            if (!user) {
                                this.auth.subscribe((authData) => {
                                    this.login(authData.auth);
                                });
                            } else {
                                this.login(user);
                            }
                        }).catch((error) => {
                            console.error('Error trying to login ', error);
                            this.loading.dismiss().then(() => {
                                this.doAlert(error.message);
                            });
                        });
                    });

<ion-input type="text" formControlName="email" id="email" name="email" [(ngModel)]="personModel.emailAddress"></ion-input>

<ion-input type="password" formControlName="password" name="password" id="password"></ion-input>