Angular切换输入框禁用状态时如何控制框内文本的显隐

实现方案 #

你可以新增一个临时变量存储输入框的原值，在禁用前保存当前输入内容、清空控件值，启用时再恢复存储的内容即可，修改后的代码如下：

1. 首先在组件中新增变量用于存储原值：

// 存储inputValues控件的历史输入值
private savedInputValues: string | null = null;

2. 修改下拉值变更的订阅逻辑：

formGroup.get('dataType').valueChanges.subscribe(selectedValue  => {
  const inputControl = formGroup.get('inputValues');
  if(selectedValue.toLowerCase() !== 'value list') {
    // 仅在控件启用状态下保存值，避免重复保存空值
    if (inputControl.enabled) {
      this.savedInputValues = inputControl.value;
      // 清空控件当前显示值，emitEvent设为false避免触发不必要的值变更事件
      inputControl.setValue('', { emitEvent: false });
    }
    inputControl.disable();
  } else {
    inputControl.enable();
    // 启用后恢复之前保存的原值
    if (this.savedInputValues !== null) {
      inputControl.setValue(this.savedInputValues, { emitEvent: false });
    }
  }
});

额外注意事项 #

• 如果表单初始化时dataType的默认值就不是value list，你可以在表单构建完成后手动执行一次上述判断逻辑，避免初始状态下禁用的输入框仍然显示默认值
• 如果表单支持重置操作，记得在重置逻辑中同步清空savedInputValues变量，避免出现脏数据
• 如果需要完全隐藏禁用状态的输入控件，也可以在模板的输入控件标签上添加[hidden]="!formGroup.get('inputValues').enabled"属性

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