Событие onChange не вызывается с помощью FormControl и ControlValueAccessor (угловой 6) - PullRequest
Новая
       9

Событие onChange не вызывается с помощью FormControl и ControlValueAccessor (угловой 6)

0 голосов
/ 18 сентября 2018

Я пытаюсь обернуть компонент 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>

событие shChange обычно запускается перед добавлением formControlName, но как только ясобытие не запускается, и консоль не выдает никакой ошибки ...... почему это?

1 Ответ

0 голосов
/ 18 сентября 2018

Для меня, когда вы добавляете 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

...