将“ngModelOptions”从自定义组件传递到包含的本机元素

我有一个名为的自定义组件（Angular 6）ppo-currency-field使用以下模板：

<span class="display" tabindex="-1">{{formattedValue()}}</span>
<input #input class="input" type="number" [name]="name" 
    [tabindex]="tabindex" [readonly]="!!readonly || readonly===''" 
    [disabled]="!!disabled || disabled===''" [ngModel]="value" 
    (ngModelChange)="writeValue($event)" [ngModelOptions]="ngModelOptions">

我的组件代码包含以下行：

@Input() ngModelOptions: Object;

我正在使用我的组件：

<ppo-currency-field [ngModel]="data.planningHours.rate"
  (ngModelChange)="data.planningHours.rate = $event; recalc();"
  [ngModelOptions]="{ updateOn: 'blur' }" 
  [disabled]="!data.containsPlanning ? '' : null"></ppo-currency-field>

正如你所看到的，我正在尝试“穿过”ngModelOptions从我的自定义组件到input元素。但这不起作用，因为更新选项没有设置为“模糊”；事实上，似乎根本不再发生任何更新。

但是，当我设置该选项时input元素directly，效果很好。

为什么我的传递不起作用，我该如何正确实施它？

编辑：只有当我尝试使用时才会出现问题ngModelOptions作为属性名称。如果我将其更改为例如options， 有用。我想这没问题，但我试图让我的组件表现得尽可能像本机输入字段。直觉上我不应该尝试重用 Angular 指令，但在这种情况下ControlValueAccessor接口应该提供一个钩子来捕获这些选项，就像它所做的那样ngModel/ngModelChange.

The ngModelOptions自定义组件级别的属性适用于 ControlValueAccessor，而无需将内部输入元素绑定到自定义@Input() ngModelOptions属性，如您所见这次堆栈闪电战 https://stackblitz.com/edit/angular-s9y69o.

为了ngModel自定义组件的正确更新：

1. 内部输入元素应在更改时更新（默认选项），以确保 ControlValueAccessor 也可以在更改时更新。

2. For the {updateOn: 'blur'}工作的选择，onTouched当输入元素失去焦点时，应调用 ControlValueAccessor 的事件回调：

<input ... 
  [ngModel]="value" 
  (ngModelChange)="writeValue($event)" 
  (blur)="onTouchedCallback()" />

where onTouchedCallback在自定义组件中设置：

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

需要调用的说明onTouched回调在评论中给出kara https://github.com/kara in 问题20384 https://github.com/angular/angular/issues/20384在 Github 上：

The {updateOn: 'blur'}顶层的功能取决于 控制其下面的值访问器实现registerOnTouched适当地。看起来您的自定义组件保存了回调，但是 从来没有真正调用过它。由于它没有被调用，所以该值不会 正确更新。我建议添加一个(blur)="onTouchedCallback()"到您的 ControlValueAccessor ，它应该可以工作。