Angular2 * .ng最初のクリック後に機能しない場合

Question

私はAngular2 Frameworkの新機能ですので、よくある間違いをお許しください。私は2つのdivタグに2つのフォームを持っています。 1つはログインフォームです。もう1つはパスワードリセットフォームです。ログインフォームには、クリックするとログインフォームが非表示になり、パスワードリセットフォームが表示されるリンクがあります。

パスワードリセットフォームには、クリックするとパスワードリセットフォームが非表示になり、ログインフォームが表示されるリンクがあります。

デフォルトでは、ログインフォームが表示されます。ここでは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); 
    } 

私typescriptです機能ですリセットフォームはうまく表示されますが、[アカウントアクセス]をクリックするとログインフォームは表示されません。それは一度動作し、その後停止します。

起動時にパスワードリセットフォームを表示して「アカウントアクセス」をクリックすると、ログインフォームが表示されます。 「リセットパスワード」リンクをクリックすると、リセットフォームが正常に表示されますが、「アカウントアクセス」を再度クリックすると、ログインフォームは表示されません。それは2回働いてから停止します。コンポーネント

private resetPassVisible = false; 

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

Answer 1

内部

Answer 2

使用この1

テンプレートで

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

私はあなたを忘れてしまったことを、あなたはあなたの完全なコンポーネントのコードを提供しなかったことから、推測していますあなたのcomponent.tsのFormControlと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を解決しました。