如何处理多个表单并在 angular 打字稿中提交，包括显示和隐藏组件？

Question

我只使用 1 个组件进行登录、验证电子邮件、设置用户名和密码，所有这些都在单个 html 文件和 1 个 ts 文件中。

我的问题是，如果 this.userService.getCode 返回代码值，我只想显示验证电子邮件表单并隐藏其他表单，如果我单击“提交”，则只会提交验证表单中的字段和数据，否则如果没有代码则只显示登录表单，当提交被点击时只提交登录表单中的数据。在 angular 人中执行此操作的有效且干净的方法是什么？非常感谢帮助和建议。谢谢。

#ts 代码

 ngOnInit(): void {      

    this.router.paramMap.subscribe(paramMap => {
      this.authKey = paramMap.get('authkey')
    });

    if (this.authKey !== null) {
      console.log("Auth key" , this.authKey)
      this.userService.getCode(4, this.authKey).subscribe(
        (res: any) => {
          console.log("res", res)
        },
        (err: any) => {
          // this.notificationService.showError('Something went wrong, Try again later.');
        }
      );
    } else {
      // this._notificationService.showError('Something went wrong, Try again later.');
    }
  }

#loginForm

<div class="login-container-section">
      <form [formGroup]="loginForm" novalidate (ngSubmit)="onSubmit()">    
        <div id="login-form">
            <button mat-raised-button class="full-width v-btn-lrg" color="primary" type="submit" [disabled]="hasSubmit">SUBMIT</button>            
            <mat-divider class="relative"></mat-divider>
          </div>    
        </div>
      </form>
    </div>

#验证电子邮件表单

<div class="verify-container-section">
      <form [formGroup]="verifyForm" novalidate (ngSubmit)="onSubmit()">    
        <div id="verify-form">
            <button mat-raised-button class="full-width v-btn-lrg" color="primary" type="submit" [disabled]="hasSubmit">SUBMIT</button>            
            <mat-divider class="relative"></mat-divider>
          </div>    
        </div>
      </form>
    </div>

#设置用户名和密码形式

<div class="setaccount-container-section">
      <form [formGroup]="setAccountForm" novalidate (ngSubmit)="onSubmit()">    
        <div id="setaccount-form">
            <button mat-raised-button class="full-width v-btn-lrg" color="primary" type="submit" [disabled]="hasSubmit">SUBMIT</button>            
            <mat-divider class="relative"></mat-divider>
          </div>    
        </div>
      </form>
    </div>

Answer 1

我认为最简单的方法是使用具有枚举值的状态变量，其中包含所有可能的状态，例如：

enum FormStatus {
  LOGIN = 1;
  VERIFY_EMAIL = 2;
  ...
}

...

generalStatus = FormStatus.LOGIN;

并设置所有 html div *ngIf，例如 *ngIf="generalStauts === FormStatus.LOGIN"，等等

根据您的逻辑，通过按钮或请求响应更改此值以更新您要呈现的 UI 部分。一个非常简单的图案。此外，如果您的表单很少，您可以根据相同的密钥验证一个或另一个。

如何处理多个表单并在 angular 打字稿中提交，包括显示和隐藏组件？

How to handle multiple forms and submit in angular typescript including showing and hiding of components?

components

typescript

angular