Angular - 切换禁用状态时控制输入框中的可见性文本答案

【问题标题】：Angular - Control the visibility text inside input box when it's disabled state is toggledAngular - 切换禁用状态时控制输入框中的可见性文本
【发布时间】：2021-11-20 16:20:56
【问题描述】：

我有一个输入表单控件，里面可能有也可能没有任何文本。我有另一个下拉表单控件，当我将下拉值更改为特定值时，我才启用输入框，如果在下拉列表中选择了其他任何内容，则输入将被禁用。下面是代码

    formGroup.get('dataType').valueChanges.subscribe(selectedValue  => {
      if(selectedValue.toLowerCase() !== 'value list') {
          formGroup.get('inputValues').disable();
        } else {
          formGroup.get('inputValues').enable();
        }
    });

因此，inputValues 字段在启用时可能会有一些内容，当我们通过选择下拉框禁用该字段时，该字段将被禁用但里面的文本仍然可见。有没有办法可以控制这种状态/可见性？

例如，假设文本框在启用时保存一个值“车辆注册”，当它被禁用时，该值应该被清除，当我们再次启用时，值应该再次显示。

正如我们在第一行中看到的，该字段被禁用但仍然可见。请建议。谢谢

【问题讨论】：

标签： angular

【解决方案1】：

您可能可以存储formGroup.get('inputValues') 的值，在禁用它之前，只需将其设置为空，当您启用它时，使用缓存的值将 formControl 值设置回来。

let cachedInputVal = '';
formGroup.get('dataType').valueChanges.subscribe(selectedValue  => {
      if(selectedValue.toLowerCase() !== 'value list') {
          cachedInputVal = formGroup.get('inputValues').value;
          formGroup.get('inputValues').patchValue('');
          formGroup.get('inputValues').disable();
        } else {
          formGroup.get('inputValues').patchValue(cachedInputVal);
          formGroup.get('inputValues').enable();
          cachedInputVal = '';
        }
    });

【讨论】：

此代码部分有效。我有 3 个下拉值，例如日期、字符串、值列表。当从 DATE 更改为 Value List 或 STRING 更改为 Value List 时，反之亦然。但是，当我将 DATE 更改为 STRING 和 Value List 时，值变为空
我认为这与if/else 条件有关，我们正在检查selectedValue。为简单起见，您可以删除 else 块中的 cachedInputVal = ''。