Angular表单验证异常：子组件插入文本后textarea仍未通过验证

问题核心：直接修改textarea的DOM值或使用插值绑定value，不会同步到Angular响应式表单的FormControl，导致验证状态未更新。

正确解决方案步骤： #

1. 移除textarea的value属性
   响应式表单通过FormControl管理值，手动设置value会和表单控件的状态管理冲突，删除后由FormControl负责初始化和更新值：

   <textarea matInput formControlName="notes"
             placeholder="E Notes" rows="5" id="DropHere"></textarea>
   

2. 通过FormControl更新值
   在父组件的addItem方法中，使用setValue或patchValue更新notes控件的值，Angular会自动检测变化并更新验证状态：

   addItem(insertedText: string) {
     const notesControl = this.form.get('notes');
     if (notesControl) {
       // 按需选择覆盖或追加文本
       // 覆盖原有内容
       // notesControl.setValue(insertedText);
       // 追加到现有内容后
       const currentValue = notesControl.value || '';
       notesControl.setValue(currentValue + insertedText);
       
       // 标记控件为已触摸（触发必填验证的状态更新）
       notesControl.markAsTouched();
       // 标记控件为脏值（可选，用于区分初始值和修改后的值）
       notesControl.markAsDirty();
     }
   }
   

为什么之前的尝试无效： #

• value="{{visit.ENotes}}"会被响应式表单忽略，FormControl的初始化值已经在createForm中通过notes: [this.v.ENotes, ...]设置，无需手动绑定value。
• 之前的onChanges方法中，markAsTouched未加括号（未执行方法），且valueChanges仅监听FormControl的变化，直接修改DOM值不会触发该事件。

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