Angular单组件多表单切换显示及对应提交的高效实现方案

第一步：TS逻辑调整 #

使用枚举管理表单状态，比布尔值扩展性更强，后续新增设置用户名密码的展示逻辑也无需重构现有结构。

// 组件顶部先定义表单类型枚举
enum FormType {
  LOGIN = 'login',
  VERIFY_EMAIL = 'verifyEmail',
  SET_ACCOUNT = 'setAccount'
}

组件内部新增状态变量，调整原有请求和提交逻辑：

export class YourComponent implements OnInit {
  // 暴露枚举给模板使用
  public readonly FormType = FormType;
  // 默认展示登录表单
  public currentForm: FormType = FormType.LOGIN;
  // 提前声明三个表单实例
  public loginForm!: FormGroup;
  public verifyForm!: FormGroup;
  public setAccountForm!: FormGroup;
  public authKey: string | null = null;
  public hasSubmit = false;

  constructor(
    private router: ActivatedRoute,
    private userService: UserService,
    private fb: FormBuilder
  ) {}

  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)
            // 接口返回code则切换到邮箱验证表单
            if(res?.code) {
              this.currentForm = FormType.VERIFY_EMAIL;
            }
          },
          (err: any) => {
            // 错误提示逻辑
          }
        );
      }
    });
    // 表单初始化逻辑省略，自行补充三个FormGroup的字段定义
  }

  // 统一提交方法，根据当前表单类型处理对应逻辑
  onSubmit() {
    this.hasSubmit = true;
    switch(this.currentForm) {
      case FormType.LOGIN:
        if(this.loginForm.invalid) {
          this.hasSubmit = false;
          return;
        }
        // 提交登录表单逻辑，取this.loginForm.value传参
        console.log('登录数据：', this.loginForm.value);
        break;
      case FormType.VERIFY_EMAIL:
        if(this.verifyForm.invalid) {
          this.hasSubmit = false;
          return;
        }
        // 提交邮箱验证表单逻辑，取this.verifyForm.value传参
        console.log('验证数据：', this.verifyForm.value);
        break;
      case FormType.SET_ACCOUNT:
        if(this.setAccountForm.invalid) {
          this.hasSubmit = false;
          return;
        }
        // 提交设置账号表单逻辑，取this.setAccountForm.value传参
        console.log('设置账号数据：', this.setAccountForm.value);
        break;
    }
  }
}

第二步：模板HTML调整 #

每个表单外层容器加*ngIf判断对应表单状态即可，无需额外的隐藏类控制：

<!-- 登录表单 -->
<div class="login-container-section" *ngIf="currentForm === FormType.LOGIN">
  <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>    
  </form>
</div>

<!-- 邮箱验证表单 -->
<div class="verify-container-section" *ngIf="currentForm === FormType.VERIFY_EMAIL">
  <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>    
  </form>
</div>

<!-- 设置用户名密码表单 -->
<div class="setaccount-container-section" *ngIf="currentForm === FormType.SET_ACCOUNT">
  <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>    
  </form>
</div>

该方案状态统一管理，无冗余判断逻辑，后续新增表单场景仅需扩展枚举、补充对应判断分支即可，维护成本极低。

内容的提问来源于stack exchange，提问作者Jhon Caylog