Angular 6.10.0 - @Directive 和响应式表单答案

【问题标题】：Angular 6.10.0 - @Directive and Reactive FormsAngular 6.10.0 - @Directive 和响应式表单
【发布时间】：2020-05-19 01:10:04
【问题描述】：

这是我的@Directive

/* Imports */
@Directive({
  selector: '[ngModel][myLabel]'
})
export class MyDirective {

  lastValue: string;

  constructor(private myService: MyService) {}

  @HostListener('input', ['$event']) onInput($event)
  {
    var start = $event.target.selectionStart;
    var end = $event.target.selectionEnd;
    $event.target.value = this.myService.format($event.target.value);
    $event.target.setSelectionRange(start, end); // Preserve the cursor position
    $event.preventDefault(); // A new event will be fired below

    // Avoid infinite loop
    if (!this.lastValue || (this.lastValue && $event.target.value.length > 0 && this.lastValue !== $event.target.value)) {
      this.lastValue = $event.target.value;

      // Must create a new "input" event since we have changed the value of the input, if not, there are no change detected in the value
      const evt = document.createEvent('HTMLEvents');
      evt.initEvent('input', false, true);
      $event.target.dispatchEvent(evt);
    }
  }
}

在“正常”角度形式上 <input> 受我的指令限制

<!-- Expected behaviour works perfectly -->
<form (ngSubmit)="submit()" #form=ngForm>
  <input myLabel type="text" ... >
</form>

但是对于 ReactForms，我的指令并没有应用于 <input>

<!-- @Directive not applied -->
<div *ngSwitchDefault [formGroup]="myFormGroup">
  <input myLabel type="text" ... />
</div>

我在网上找不到关于如何在 ReactForm 上应用指令？的答案。
我知道我应该使用Validator，但我的@Directive 已经存在，并且创建两个格式化规则会重复看起来不干净的逻辑（如何格式化输入）......

编辑：我的指令在 app.module.ts 中声明得很好
EDIT2：提供指令内容

【问题讨论】：

向响应式表单控件添加主机侦听器确实丑陋且不干净。这里的东西是什么？如果您需要帮助，请给我们提供见解。 + 您可以提取验证并将其用于模板驱动的表单和反应式表单。您通常应该远离使用模板驱动的表单，因为它们只是为了让 Angular 1 应用程序更容易迁移到 Angular 2+ 应用程序而提供
@finki 我的问题是一个巨大的应用程序的一部分，除了一个之外，每个表单都是模板驱动的......这就是为什么我要为这个特殊的 ReactForm tbh 寻求解决方案。切换到模板驱动会浪费更多时间，并且 reactform 更干净；）
当然它更干净 :) 关于您的指令实现：我很确定仅 Validator 不能涵盖您的所有功能，因为它所做的不仅仅是验证。恕我直言，最快的解决方案是为可视化创建一个验证器并观察 FormControl (angular.io/api/forms/AbstractControl#valueChanges) 的 valueChanges -> onInput 主机侦听器中的逻辑将进入那里
@finki 这就是我要找的东西，我建议你把它贴在答案中，这样我就可以关闭帖子了:)

标签： angular angular-reactive-forms angular-directive angular-forms

【解决方案1】：

恕我直言，最快的解决方案是为可视化创建一个验证器并观察 FormControl 的 valueChanges：

form.get('inputName').valueChanges.subscribe(value=>{
    // Code from your onInput @HostListener
});

验证器将与表单初始化一起使用：

this.form.group({ inputName: ['initialValue', yourValidator]});

【讨论】：