Angular中使用NgControl时writeValue报错：control未定义

为什么NgControl.control会是undefined？ #

Angular中NgControl的control属性（即FormControl实例）并不是在注入NgControl时就立刻初始化的。它的初始化时机是Angular完成表单控件绑定（比如通过formControlName或[formControl]关联到父表单）之后。而writeValue方法的调用通常更早——Angular会在初始化控件时就调用writeValue传递初始值，这时候control还没被赋值，自然就是undefined。

另外，如果你的自定义控件没有正确和表单控件绑定（比如模板里没使用formControlName/[formControl]），NgControl的control也始终不会被初始化。

修复方案 #

1. 直接使用writeValue的入参
   writeValue的values参数就是当前要设置给控件的初始值，完全不需要通过this.valueControl.control.value获取，直接用这个参数即可：

   writeValue(values: any): void {
       if (values) {
           // 执行操作
       }
   }
   

2. 延迟访问control
   如果确实需要操作FormControl实例，可以在组件生命周期钩子（比如ngAfterViewInit）中访问，或者通过RxJS监听NgControl的状态变化，确保control存在后再执行逻辑：

   import { OnInit } from '@angular/core';
   
   export class YourCustomComponent implements OnInit {
       constructor( @Self() @Optional() public valueControl: NgControl ) {
           if( valueControl ) {
               valueControl.valueAccessor = this;
           }
       }
   
       ngOnInit(): void {
           // 这里control大概率已经初始化完成
           if (this.valueControl?.control) {
               // 执行操作
           }
       }
   
       writeValue(values: any): void {
           // 用入参处理初始值
       }
   }
   

3. 确保控件正确绑定表单
   在使用自定义控件的模板中，必须通过formControlName或[formControl]将其关联到一个FormControl，否则NgControl.control永远不会被初始化：

   <!-- 示例：在表单中绑定自定义控件 -->
   <form [formGroup]="myForm">
       <your-custom-control formControlName="myControl"></your-custom-control>
   </form>
   

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