不使用ControlValueAccessor从自定义控件传播的值

Question

我有这个自定义控件,其中包括一个选择组件.但在我的反应形式中,价值永远不会传播.

有人可以帮我吗？

我的自定义控件:

const SOME_SELECT_VALUE_ACCESSOR = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => SomeSelectComponent),
  multi: true
};

@Component({
  selector: 'some-select',
  template: `
  <select class="form-control">
  <option value="" disabled>Bitte wählen sie einen Eintrag aus aus</option>
  <option *ngFor="let item of optionItems" value="{{ item.id }}">
    {{ item.name }}
  </option>
</select>
  `,
  providers: [SOME_SELECT_VALUE_ACCESSOR]
})
export class SomeSelectComponent implements OnInit, ControlValueAccessor {

  private _value: any;

  @Input() optionItems: Array<OptionItem> = [];

  private onTouchedCallback: () => void;
  private onChangeCallback: (_: any) => void;

  ngOnInit(): void {
  }

  writeValue(obj: any): void {
    console.log(obj);
    if (this._value !== obj) {
      this._value = obj;
    }
  }

  registerOnChange(fn: any): void {
    this.onChangeCallback = fn;
  }

  registerOnTouched(fn: any): void {
    this.onTouchedCallback = fn;
  }

}

export interface OptionItem {
  key: String;
  value: String;
}

一个plnkr:https://plnkr.co/edit/VNflDbpMm1VmfIHcMcXr ？ p = preview

Answer 1

因为在更改值时不调用onChangeCallback:

<select class="form-control" (change)="change(select.value)" #select>

change(val) {
  this.onChangeCallback(val);
}

现在您可以看到控制值已更改.

你缺少的第二件事是将模型中的选择框更新为模板,在我的plunker中我也添加了解决方案.

工作人员:https://plnkr.co/edit/C5mwsDre8OCkWYCDOF4i ？ p = preview

Answer 2

柱塞示例

<select class="form-control" (change)="writeValue($event.target.value)">

另一种方法

柱塞示例

<select class="form-control" [ngModel]="_value" (ngModelChange)="writeValue($event)">
<option [ngValue]="null" disabled>Bitte wählen sie einen Eintrag aus aus</option>