角 9 |指令中的 ngModel Provider 未按预期工作

Question

我有一个指令读取输入控件的脏状态并采取一些行动。

以下是指令的代码。

// our root app component
import { Directive, HostListener, Input } from '@angular/core';
import { NgModel, FormGroup } from '@angular/forms';

@Directive({
    selector: '[ngModel][appMarkAsDirty]',
    providers: [NgModel]
})
export class MarkAsDirtyDirective {
    @Input('appMarkAsDirty')
    parentFormGroup: FormGroup;

    constructor(private model: NgModel) { }

    @HostListener('ngModelChange', ['$event'])
    onInputChange($event) {
        console.log('this.model', this.model);
        if (this.model.dirty) {
            this.parentFormGroup.markAsDirty();
        }
    }
}

问题是，当用户在控件中键入时，指令中的 ngModel 引用不会更新。它始终保持在初始阶段，即 value 始终为 null，并且控件始终被触摸为 false 和肮脏的 false。

这在 Angular 8 之前工作正常。并且，在 Angular 9 中已停止工作。

stackblitz 的链接： https://stackblitz.com/edit/angular-ivy-yxbzny

提前致谢！

Answer 1

我认为您必须从指令的声明中删除 providers 数组：

@Directive({
    selector: '[ngModel][appMarkAsDirty]',
    // providers: [NgModel]
})

这是因为如果你有 2 个指令 A 和 B 并且它们被应用在同一个元素上，你可以注入，例如 A 到 B：

a.directive.ts

@Directive({
  selector: '[appA]'
})
export class ADirective {
  aDir = true

  constructor() { }

}

b.directive.ts

@Directive({
  selector: '[appB]'
})
export class BDirective {
  bDir = true

  // Assuming `A` and `B` are applied on the same element
  // Using `@Optional()` will not throw an error in case `A` is not applied
  constructor(@Optional() private a: ADirective) {
    console.log(this.a)
  }

}

ng-run demo

Answer 2

@manish 我已经编辑了 stackblitz URL 请 cilck here

[