Angular2 *.ng如果第一次点击后不起作用

Question

我是 Angular2 框架的新手，所以请原谅任何常见的错误。我在 2 个 div 标签中有两种形式。一个是登录表单，另一个是密码重置表单。在登录表单下有一个链接，单击该链接会隐藏登录表单，然后显示密码重置表单。

在密码重置表单下有一个链接，点击该链接会隐藏密码重置表单并显示登录表单。

默认情况下，登录表单是可见的。这是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);
  }

我遇到的问题是，当我第一次进入并单击“重置密码”链接时，重置表单显示正常，但是当我单击“帐户访问”时，它没有显示登录表单。所以它工作一次然后停止。

奇怪的是，如果我在启动时显示密码重置表单，然后单击“帐户访问”，它确实会显示登录表单。如果我然后单击“重置密码”链接，重置表单显示正常，但是当我再次单击“帐户访问”时，它不会显示登录表单。所以它工作了两次然后停止。

Answer 1

我猜，因为您没有提供完整的组件代码，所以您忘记在您的 component.ts 中定义您的 FormControls 和 FormGroups 在 Plunker 上进行测试时，控制台显示以下错误：

错误错误：formGroup 需要一个 FormGroup 实例。请传一个 在。

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 如果您想亲自尝试一下。

Answer 2

用这个

在您的模板中

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