Angular2 * .ngIf第一次點擊後不能工作

我對Angular2 Framework非常陌生，所以很難理解任何常見的錯誤。我在兩個div標籤中有兩種形式。一種是登錄表單，另一種是密碼重置表單。在登錄表單下有一個鏈接，點擊時隱藏登錄表單，顯示密碼重置表單。Angular2 * .ngIf第一次點擊後不能工作

在密碼重置表單下面有一個鏈接，當點擊時隱藏密碼重置表單並顯示登錄表單。

默認情況下，登錄表單是可見的。下面是HTML代碼

<div class="login-block" *ngIf="!showResetPassword">     
       <form [formGroup]="loginForm" (ngSubmit)="onSubmit(loginForm)"> 
        <h1>Login</h1> 
        <div> 
        <label for="username"></label> 
        <input type="text" placeholder="username" id="username" formControlName="username" /> 
       </div> 
       <div > 
        <label for="password"></label> 
        <input type="password" placeholder="password" id="password" formControlName="password" /> 
       </div> 
       <div> 
        <button type="submit" >Log In</button> 
       </div> 
       </form> 
        <div> 
         <a href="#" (click)="onTogglePasswordReset($event)" >Reset Password?</a> 
       </div>    
     </div> 
      <div class="login-block" *ngIf="showResetPassword"> 
       <form [formGroup]="resetForm" (ngSubmit)="onSubmit(resetForm)"> 
        <h1>Reset password</h1> 
       <div> 
        <label for="resetusername"></label> 
        <input type="text" placeholder="username" id="resetusername" formControlName="resetusername" /> 
       </div> 
       <div> 
       <button type="submit">Continue</button> 
       </div> 
       </form> 
       <div> 
       <a href="#" (click)="onTogglePasswordReset($event)">Account Access</a> 
       </div> 
      </div>

，這是我的打字稿功能

onTogglePasswordReset (e: Event) { 
    e.preventDefault(); 
     this.showResetPassword=!this.showResetPassword; 
     alert(this.showResetPassword); 
    }

我遇到的問題是，當我走在首次並點擊「重設密碼」鏈接時，重置表單顯示正常，但是當我點擊「帳戶訪問」時，它不顯示登錄表單。所以它工作一次然後停止。

奇怪的部分是，如果我在啓動時顯示密碼重置表單，然後點擊「帳戶訪問」它確實顯示登錄表單。如果我然後點擊「重置密碼」鏈接，重置表單顯示正常，但當我再次點擊「帳戶訪問」時，它不會顯示登錄表單。所以它工作兩次然後停止。

來源

2017-04-06 Abhi.Net

我猜，因爲你沒有提供您完整的組件代碼裏面，你忘了在您的component.ts 中定義您的FormControl s和FormGroup當在Plunker上進行測試時，控制檯顯示器YED以下錯誤：

ERROR Error: formGroup expects a FormGroup instance. Please pass one in.

Example: 


<div [formGroup]="myGroup"> 
    <input formControlName="firstName"> 
</div> 

In your class: 

this.myGroup = new FormGroup({ 
    firstName: new FormControl() 
});

添加FormControls解決了這個問題

export class FormComponent implements OnInit { 

    loginForm = new FormGroup({username: new FormControl(), password: new FormControl()}) 
    resetForm = new FormGroup({resetusername: new FormControl()}) 
    showResetPassword = false; 

    constructor() { 

    } 

    onTogglePasswordReset() { 
     this.showResetPassword = !this.showResetPassword; 
    } 

}

Here is the code on Plunker，如果你想自己試試看。

來源

2017-04-06 08:25:17 YounesM

我有形式Conrtols在ts文件中聲明，只是沒有粘貼它們。你的代碼在plunker工作finr，但我仍然有我的問題相同的問題。 –

謝謝你的幫助。我能夠使用你的Plunker代碼縮小錯誤。第二種形式的輸入控件在Typescript中的表單構建器代碼中未正確引用。 –

使用模板

<a (click)="toggle(false)" *ngIf="showResetPass">Reset Password</a> 
<a (click)="toggle(true)" *ngIf="!showResetPass">Access Account</a>

這個

您的組件

private resetPassVisible = false; 

toggle(bool) { 
    this.resetPassVisible = bool; 
}

來源

2017-04-06 08:06:38 Kal

Angular2 * .ngIf第一次點擊後不能工作

回答

相關問題