Question

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

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

默认情况下，登录表单可见。这是HTML代码

// If you using existing model, in this example update action
public function actionUpdate($id)
{
     $model = $this->findModel($id);
     $model->site_url = 'your value';

     if ($model->load(Yii::$app->request->post()) && $model->save()) {
         .... 
           return $this->redirect(['view', 'id' => $model->id]);
     } else {
           return $this->render('update', [
                'model' => $model
           ]);
     }
}

// If you creating new model and passing values to attributes
public function actionCreate($id)
{
     $model = new Model;
     $model->site_url = 'your value';

     if ($model->load(Yii::$app->request->post()) && $model->save()) {
         .... 
           return $this->redirect(['view', 'id' => $model->id]);
     } else {
           return $this->render('create', [
                'model' => $model
           ]);
     }
}

这是我的打字稿功能

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

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

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

Answer 1

使用这个

模板中的

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

Answer 2

我猜测，由于您未提供完整的组件代码，因此忘记在FormControl中定义FormGroup和component.ts s 在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 如果您想亲自尝试一下。

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

2 个答案: