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工作正常，不會打破你的應用程序。