Question

演示：https://plnkr.co/edit/cMu3lI3PkxHRErJE3T93?p=preview

我有一些组件似乎都有同样的问题，那就是我在使用ngModel时无法为formControlName或ControlValueAccessor设置默认值。

例如，在演示中，我们有一个select，它提供了更好的用户体验和视觉效果，但在ngOnInit我不能将模型设置为提供的选项中的第一项，如果select有{{1}输入设置为required。

如果true，则select将始终具有值。但是现在它只在你实际点击一个选项后才有效。

一个“解决方案”是始终在其使用位置的父级中设置值。但这需要大量不必要的代码，我不想这样做。特别是因为设置默认值应该不是问题。

所以这里是我们正在使用的简短片段：

true

正如您在演示中所看到的，private _model: any; set model(val) { this._model = val; } get model() { return this._model; } propagateChange = (_: any) => {}; registerOnChange(fn: () => any) { this.propagateChange = fn; } registerOnTouched() {} writeValue(value: any) { if (value !== undefined) { this.model = value; this.cd.markForCheck(); } } ngOnInit() { if (!this.model && this.required) { this.model = this.options[0]; } else if (!this.required) { this.model = null; } this.propagateChange(this.model); }中模型的设置无效。

为什么会这样？

Answer 1

当您致电this.propagateChange(this.model);时，此功能尚未注册。

所以我知道两个解决方法

1）分配propagateChange后更新模型

export const NOOP: any = () => {};
...

propagateChange = NOOP;

registerOnChange(fn: () => any) {
  this.propagateChange = fn;
  if(this.required) {
    fn(this.model);
  }
}

writeValue(value: any) {
  if (value !== undefined && this.propagateChange !== NOOP) {
    this.model = value;
    this.cd.markForCheck();
  }
}

<强> Plunker Example

2）使用ngModelChange事件

@Output() ngModelChange = new EventEmitter();

this.ngModelChange.emit(this.model);

<强> Plunker Example

Angular - 使用ControlValueAccessor时无法在组件内设置默认值

1 个答案: