Ionc2/Angular2页面没有反映变化

Question

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

正如你所看到的，Sign In按钮被禁用。

我的问题是它应该只在窗体无效时被禁用。但是，当表格有效时，即有Email和Password，它不应被禁用。

当我输入Email和Password时，它保持禁用状态，但是如果我将焦点从浏览器切换回来，然后回到它，它将被启用。就好像页面没有刷新到正确的状态。

问题

是否有一种方式来获得的形式是有效的这立即启用？

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> 

loginemail.ts

​​3210

UPDATE

按照下面的提醒，我曾尝试在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); 
          }); 
         }); 
        }); 

Answer 1

尝试一个名字为您的电子邮件和密码字段

<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> 

登录表单这样有这些元素为它的validtion引用。

Answer 2

我遇到了同样的问题。 看起来像使用firebase与Ionic 2休息形式，输入，按钮等。

我已经打开了github issue为此，我不是第一个。

我做的解决方法是在promisse中封装对firebase的每个调用（请参阅示例中的链接），并为我解决了这个问题。在app.components中使用auth.onAuthStateChanged也存在一些问题，我没有尝试，但可能将它放入Observable中也可能是一个愚蠢的想法。

所以，问题是使用firebase promisses与ionic2/angular2，打字稿promisses工作正常，不会打破你的应用程序。