Angular2 * .ngIst nicht nach dem ersten Klick funktionsfähig

Question

Ich bin sehr neu in Angular2 Framework, also entschuldigen Sie alle üblichen Fehler. Ich habe zwei Formen in 2 div Tags. Ein Login-Formular ist ein Passwort-Reset-Formular. Unter dem Login-Formular gibt es einen Link, der beim Anklicken das Login-Formular ausblendet und das Passwort-Reset-Formular anzeigt.

Unter dem Formular zum Zurücksetzen des Passworts befindet sich ein Link, der nach dem Anklicken das Formular zum Zurücksetzen des Passworts ausblendet und das Anmeldeformular anzeigt.

Standardmäßig ist das Login-Formular sichtbar. Hier ist der HTML-Code

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

und dies ist meine Typoskript Funktion

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

Das Problem, das ich habe ist, dass wenn ich zum ersten Mal in ein und klicken Sie auf ‚Passwort zurücksetzen‘ -Link, der Reset-Formular wird angezeigt, aber wenn ich auf "Kontozugriff" klicke, wird das Anmeldeformular nicht angezeigt. so funktioniert es einmal und dann stoppt es.

Der seltsame Teil ist, dass, wenn ich das Formular zum Zurücksetzen des Passworts beim Start anzeigen und dann auf "Kontozugriff" klicken, zeigt es das Login-Formular. Wenn ich dann auf den Link "Passwort zurücksetzen" klicke, wird das Zurücksetzungsformular angezeigt, aber wenn ich erneut auf "Kontozugriff" klicke, wird das Anmeldeformular nicht angezeigt. So funktioniert es zweimal und stoppt dann.

Answer 1

Ich vermute, da Sie nicht Ihren vollständigen Komponentencode vorsah, dass Sie vergessen haben, Definieren Sie Ihre FormControl s und FormGroup s in Ihrem component.ts Beim Testen auf Plunker die Konsole anzeigen Yed den folgenden Fehler:

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() 
}); 

die FormControls Hinzufügen löste das Problem

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 wenn Sie es wünschen, es zu versuchen, für sich selbst.

Answer 2

Verwendung diesen

in Ihrer Vorlage

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

in Ihrer Komponente

private resetPassVisible = false; 

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