Angular响应式表单中启用状态的storyNumber文本框无法输入内容

• 第一处错误是在响应式表单中混用了模板驱动表单的ngModelChange事件。Angular响应式表单通过formControlName指令已经自动实现了视图与表单模型的双向值同步，不需要额外绑定ngModel、ngModelChange这类模板驱动表单的API，这种混用本身就是官方明确废弃的写法，会打乱值更新的时序。
• 第二处核心错误是你绑定的keyup、ngModelChange会重复触发updateFormStoryNumber方法，结合这类交互的常见写法问题：你大概率在该方法中写了「只要storyNumber校验不通过就重置控件值为空」的逻辑。你给storyNumber配置的正则规则要求至少2个大写字母开头才能匹配，用户输入第一个字符时必然不满足正则校验，此时值会被立刻重置为空，永远无法输入后续内容，表现为输入框无法键入任何内容。

1. 清理模板中多余的事件绑定，删除不必要的keyup、ngModelChange事件绑定，响应式表单不需要手动做值同步。修复后的输入框代码如下：

<input id="storynumber"
       class="form-control"
       type="text"
       formControlName="storyNumber">

2. 移除原有错误的updateFormStoryNumber方法，改用响应式表单自带的valueChanges订阅来监听值变化、实现控件启用/禁用的切换逻辑，不要在用户输入过程中随意重置输入值。在表单初始化完成后添加如下逻辑：

// 注意在组件销毁时要取消该订阅避免内存泄漏
this.taskForm.get('storyNumber').valueChanges.subscribe(() => {
  const storyControl = this.taskForm.get('storyNumber');
  const relatedControlNames = ['category', 'taskName', 'effortLevel', 'complexityLevel', 'note'];
  relatedControlNames.forEach(name => {
    const control = this.taskForm.get(name);
    storyControl.valid ? control.enable() : control.disable();
  })
})

3. 保留你原有表单组的初始配置即可，初始状态下除storyNumber外其余控件均为禁用态，符合你的预期。当用户输入的内容完全匹配正则规则后，其余控件会自动切换为启用状态，不会再出现输入框无法键入的问题。

补充注意：如果需要在初始加载时主动触发一次状态校验，可以在订阅后手动调用一次this.taskForm.get('storyNumber').updateValueAndValidity()，保证初始状态一致。

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