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

https://delight-im.github.io/HTML-Sheets-of-Paper/

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

另一种方法

Plunker example

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

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

2 个答案: