如何在Angular组件的TypeScript中控制HTML密码输入框的显隐？

步骤1：在组件类中添加模式判断变量 #

在你的Dialog组件类里定义一个布尔变量，用来区分当前是添加用户还是更新用户模式，通常通过Dialog传入的参数来判断：

import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-user-dialog',
  templateUrl: './user-dialog.component.html',
})
export class UserDialogComponent {
  userForm: FormGroup;
  isEditMode: boolean;

  constructor(
    private fb: FormBuilder,
    @Inject(MAT_DIALOG_DATA) public data: any
  ) {
    // 打开Dialog时，若传入user对象则判定为更新模式
    this.isEditMode = !!data.user;
    this.initForm();
  }

  private initForm(): void {
    // 根据模式设置密码控件的验证规则
    const passwordValidators = this.isEditMode 
      ? [] 
      : [Validators.required, Validators.minLength(6)];

    this.userForm = this.fb.group({
      username: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]],
      password: ['', passwordValidators]
    });

    // 编辑模式下禁用密码控件，避免表单验证干扰
    if (this.isEditMode) {
      this.userForm.get('password')?.disable();
    }
  }
}

步骤2：在HTML中控制密码框显示 #

根据isEditMode变量，用两种方式控制密码输入框的显示：

方式1：用*ngIf完全移除DOM（推荐）

更新模式下彻底移除密码框的DOM元素，适合不需要保留该控件的场景：

<!-- 其他表单控件 -->
<mat-form-field appearance="outline">
    <mat-label>Username</mat-label>
    <input formControlName="username" matInput/>  
</mat-form-field>

<mat-form-field appearance="outline">
    <mat-label>Email</mat-label>
    <input formControlName="email" matInput type="email"/>  
</mat-form-field>

<!-- 仅添加模式显示密码框 -->
<mat-form-field appearance="outline" *ngIf="!isEditMode">
    <mat-label>Password</mat-label>
    <input formControlName="password" matInput type="password"/>  
</mat-form-field>

方式2：用[hidden]隐藏DOM（保留控件）

如果需要保留密码控件的DOM但不显示，可使用[hidden]，需配合控件禁用或调整验证规则：

<mat-form-field appearance="outline" [hidden]="isEditMode">
    <mat-label>Password</mat-label>
    <input formControlName="password" matInput type="password"/>  
</mat-form-field>

注意事项 #

• 使用*ngIf时，更新模式下密码控件不会存在于表单中，无需担心验证问题；
• 使用[hidden]时，必须在编辑模式下禁用密码控件，避免表单验证失败；
• 打开Dialog时，确保传入正确参数（比如更新时传入用户对象）来触发isEditMode的判断。

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