FormControl 和 ControlValueAccessor 不会触发 onChange 事件 (angular 6)

Question

我正在尝试用自定义组件包装 ng-select (https://github.com/ng-select/ng-select) 组件，我正在使用具有反应形式的 ControlValueAccessor，

export class ShNgSelectComponent implements OnInit, OnChanges, 
ControlValueAccessor {
   @Input() shItems: Array<object>;
   @Input() shBindValue: string;
   @Input() shBindLabel: string;
   @Input() shPlaceholder: any;

  @Output() shChange = new EventEmitter<Object>();

  ngOnInit() {  
  }


  writeValue(value: any): void {
    this.shItems = value || '';
  }

  propagateChange(event){
    this.shChange.emit(event);
   }


  registerOnChange(fn) {
    this.propagateChange = fn;
   }

  registerOnTouched() { }
}

这是 sh-ng-select

的模板

<ng-select [items]='shItems' [bindValue]='shBindValue' [placeholder]='shPlaceholder' [bindLabel]='shBindLabel' (change)='propagateChange($event)'></ng-select>

这是我要嵌入自定义组件的主要组件

<sh-ng-select [shItems]='manufactureList' [shFormGroup]='requestForm' (shChange)='getModels($event)' formControlName="manufactureId" [shPlaceholder]='"اختر الشركة المصنعة"' [shBindValue]='"id"' [shBindLabel]='"name"'></sh-ng-select>

在我添加 formControlName 之前 shChange 事件正常触发，但是一旦我添加事件就不会触发，并且控制台不会抛出任何错误……这是为什么？

Answer 1

对我来说，当你添加 formControlName 时，它会绑定所有它需要工作的东西，所以它会调用 registerOnChange、registerOnTouched、writeValue...因为他调用 registerOnChange 并执行“this.propagateChange = fn" propageChange 方法将不再引用您定义的方法 :

  propagateChange(event){
    this.shChange.emit(event);
   }

因此不再调用 shChange 事件发射器

有关使使用 [(ngModel)] / formControlName 的组件重复相同模式的更多信息，您可以在此处找到一个简单的实现，您可以将其扩展以在您的组件中使用： https://github.com/xrobert35/asi-ngtools/blob/master/src/components/common/default-control-value-accessor.ts

使用它的简单组件：https://github.com/xrobert35/asi-ngtools/blob/master/src/components/asi-checkbox/asi-checkbox.component.ts

FormControl 和 ControlValueAccessor 不会触发 onChange 事件 (angular 6)

onChange event does not fire with FormControl and ControlValueAccessor (angular 6)

form-control

angular-ngselect

angular