Angular 4中this未定义及FormControl值获取异常求助

问题1：validateAllFormFields中this为undefined，无法获取控件值 #

原因分析 #

从你的代码来看，有两个核心问题：

1. this上下文可能丢失：虽然你在onClick里通过this.validateAllFormFields调用，但如果这个函数被异步场景调用或作为回调传递，可能会丢失组件实例的this绑定；
2. 错误访问ViewChild值：你直接用this.txtImporteMaximoVC === "0"判断，但@ViewChild('txtImporteMaximo')获取的是ElementRef对象，不是输入框的字符串值，直接比较对象和字符串本身就是错误逻辑。

解决步骤 #

• 锁定this上下文：把validateAllFormFields改成箭头函数，确保函数内的this始终指向组件实例：

  validateAllFormFields = (formGroup: FormGroup) => {
    Object.keys(formGroup.controls).forEach(field => {
      // 原逻辑保持不变
    });
  }
  

• 正确获取输入框值：通过ElementRef的nativeElement属性访问DOM元素，再读取值（注意要处理格式化后的字符串，比如去掉货币符号再转数值）：

  if (field === "txtImporteMaximo") {
    const inputValue = this.txtImporteMaximoVC.nativeElement.value;
    // 去除非数字和小数点的字符，转成数值
    const numericValue = parseFloat(inputValue.replace(/[^0-9.]/g, ''));
    if (isNaN(numericValue) || numericValue === 0) {
      control.setErrors({ lessThanZeroErr: true });
    }
  }
  

问题2：control.value为空，但输入框有内容（自定义指令导致） #

原因分析 #

你使用的currencyFormatterDirective自定义指令大概率只处理了输入框的视图层格式化（比如添加货币符号、千分位分隔符），但没有同步更新FormControl的模型值，导致control.value无法正确获取输入内容。

解决步骤 #

1. 让指令实现ControlValueAccessor接口：这是Angular中实现表单控件与自定义指令/组件值同步的标准方式。你需要在指令中定义writeValue、registerOnChange、registerOnTouched三个核心方法，确保格式化后的原始数值能同步到FormControl中。
2. 在指令中主动同步模型值：如果指令监听了输入框的input或blur事件，格式化完成后要通过NgControl获取对应FormControl并设置其值：

   import { NgControl } from '@angular/forms';
   
   constructor(private ngControl: NgControl) {}
   
   // 示例：输入事件处理函数
   onInput(event: Event) {
     const inputElement = event.target as HTMLInputElement;
     const formattedDisplayValue = this.formatCurrency(inputElement.value);
     inputElement.value = formattedDisplayValue;
     // 提取纯数值，同步到FormControl模型
     const rawNumericValue = this.extractRawNumber(formattedDisplayValue);
     this.ngControl.control.setValue(rawNumericValue);
   }
   

3. 临时替代方案：如果暂时无法修改指令，可以在组件中通过ViewChild获取输入框的DOM值（如问题1中的方式），但这只是权宜之计，修复指令的同步逻辑才是根本解决办法。

另外补充：你的txtImporteMaximo FormControl已经绑定了lessThanZeroValidator验证器，其实可以直接在验证器里处理数值判断，不需要在validateAllFormFields中额外重复逻辑，这样更符合Angular表单的设计规范。

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