Angular 4：自定义验证器中组件变量this指向异常问题

这个问题我之前也碰到过，本质是函数上下文绑定的坑，咱们一步步拆解解决：

问题根源 #

当你把validateName作为验证器函数传递给FormControl时，它脱离了组件实例的上下文执行。在Angular默认的严格模式下，函数内部的this不再指向组件实例，而是变成了undefined，这就是为什么你访问this.name会出问题。

三种可行的解决方案 #

1. 用箭头函数包裹验证器调用 #

在创建FormControl时，用箭头函数来调用你的验证器——箭头函数会自动捕获当前组件的this上下文，确保内部能访问到组件实例的name属性：

ngOnInit(): void { 
  this.formBuilder.group({ 
    nameFormCtrl: ['', (c: FormControl) => this.validateName(c)], 
  }); 
}

validateName(c: FormControl) { 
  return c.value === this.name ? null : { validateName: { valid: false } }; 
}

2. 在构造函数中手动绑定this #

提前在组件的构造函数里，把validateName的this绑定到组件实例。这样无论你怎么传递这个函数，它的上下文都不会丢失：

constructor(private formBuilder: FormBuilder) {
  // 手动绑定this到组件实例
  this.validateName = this.validateName.bind(this);
}

ngOnInit(): void { 
  this.formBuilder.group({ 
    nameFormCtrl: ['', this.validateName], 
  }); 
}

validateName(c: FormControl) { 
  return c.value === this.name ? null : { validateName: { valid: false } }; 
}

3. 将验证器定义为箭头函数（推荐） #

直接把validateName定义成箭头函数，箭头函数的this会始终指向它定义时的上下文（也就是当前组件实例），不需要额外的绑定操作，代码更简洁：

ngOnInit(): void { 
  this.formBuilder.group({ 
    nameFormCtrl: ['', this.validateName], 
  }); 
}

// 箭头函数定义，this自动绑定组件实例
validateName = (c: FormControl) => { 
  return c.value === this.name ? null : { validateName: { valid: false } }; 
}

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