如何在自定义表单控制器中封装ng-select并实现双向绑定？

问题核心 #

你当前的问题是ControlValueAccessor的writeValue方法没正确实现——这个方法就是用来接收外部表单值变化、同步到内部ng-select的，之前只做了控件到表单的正向同步，反向逻辑缺失了。

最简解决方案：完善ControlValueAccessor实现 #

不需要直接把formControlName传给内部ng-select，通过正确实现ControlValueAccessor的所有方法，就能让表单和控件自动双向同步。以下是完整示例：

1. 自定义ng-select组件（组件1）代码 #

import { Component, forwardRef, Input } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Component({
  selector: 'app-custom-ng-select',
  template: `
    <ng-select
      [items]="items"
      [value]="selectedValue"
      (change)="onSelectChange($event)"
      (search)="handleSearch($event)"
      [loading]="isLoading"
      bindLabel="name"
      bindValue="id"
    ></ng-select>
  `,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => CustomNgSelectComponent),
      multi: true
    }
  ]
})
export class CustomNgSelectComponent implements ControlValueAccessor {
  @Input() items: any[] = [];
  isLoading = false;
  selectedValue: any;

  // ControlValueAccessor回调函数，用于和外部表单通信
  private onChange: (value: any) => void = () => {};
  private onTouched: () => void = () => {};

  // 反向同步核心：接收外部表单的值，更新内部ng-select
  writeValue(value: any): void {
    this.selectedValue = value;
  }

  // 注册值变化回调
  registerOnChange(fn: any): void {
    this.onChange = fn;
  }

  // 注册触摸状态回调
  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }

  // 处理后端搜索逻辑
  async handleSearch(keyword: string) {
    this.isLoading = true;
    // 替换成你的后端请求
    const response = await fetch(`/api/search?kw=${keyword}`);
    this.items = await response.json();
    this.isLoading = false;
  }

  // 内部ng-select值变化时，同步到外部表单
  onSelectChange(value: any) {
    this.selectedValue = value;
    this.onChange(value);
    this.onTouched();
  }
}

2. 使用自定义控件的表单组件（组件2）代码 #

import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-target-form',
  template: `
    <form [formGroup]="demoForm">
      <app-custom-ng-select
        formControlName="selectedOption"
        [items]="defaultOptions"
      ></app-custom-ng-select>
    </form>

    <!-- 测试按钮：手动修改表单值，验证反向同步 -->
    <button (click)="setFormValue()">设置表单值为2</button>
  `
})
export class TargetFormComponent {
  demoForm: FormGroup;
  defaultOptions = [
    { id: 1, name: '选项1' },
    { id: 2, name: '选项2' },
    { id: 3, name: '选项3' }
  ];

  constructor(private fb: FormBuilder) {
    this.demoForm = this.fb.group({
      selectedOption: [1] // 初始值
    });

    // 监听表单值变化，验证同步效果
    this.demoForm.get('selectedOption')?.valueChanges.subscribe(val => {
      console.log('表单值更新:', val);
    });
  }

  setFormValue() {
    this.demoForm.patchValue({ selectedOption: 2 });
  }
}

额外说明 #

如果确实需要在自定义组件内获取对应的FormControl，可以通过@Input()接收formControlName，再注入NgControl获取：

import { NgControl } from '@angular/forms';

// 组件内注入
constructor(private ngControl: NgControl) {}

ngOnInit() {
  const control = this.ngControl.control;
  // 这里可以做控件监听、校验等操作
}

但绝大多数场景下，完善ControlValueAccessor的实现就足够解决双向同步问题了。

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