Javascript 角度-当在component.ts文件中启动表单事件时，如何从指令内部检测表单事件？

如果我有一个带有表单输入的组件，并且我想将OnInit块中的两条语句检测为指令中的事件，那么正确的方法是什么？我在“input”和“ngModelChange”方面很幸运，但我尝试听的事件中没有一个捕捉到模型驱动表单的patchValue（）方法或模板驱动表单的直接赋值（即使它反映在DOM中）

以下是我的组件：

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms' 

@Component({
  selector: 'my-app',
  template:
  `
  <h5>Model form input</h5>
  <form [formGroup]="inputForm">
    <input patchable-input formControlName="input" />
  </form>

  <h5>Template form input</h5>
  <input patchable-input [(ngModel)]="input" />
  `
})
export class AppComponent implements OnInit {
  inputForm = new FormGroup({
    input: new FormControl('')
  })

  input = '';

  ngOnInit() {
    this.inputForm.patchValue({
      input: 'testing patch'
    })

    this.input = 'testing override'
  }
}

---

和一个（观察控制台）

您必须在视图初始化后执行

而不是
OnInit
。原因是在生命周期的这一点上，您的指令已初始化，并已通过
@HostListener
装饰程序订阅了
ngModelChange
事件

另见



从'@angular/core'导入{Component，AfterViewInit}；
从“@angular/forms”导入{FormGroup，FormControl}
@组成部分({
选择器：“我的应用程序”，
模板：
`
模型表单输入
模板表单输入
`
})
导出类AppComponent实现AfterViewInit{
inputForm=新FormGroup({
输入：新表单控件（“”）
})
输入=''；
ngAfterViewInit（）{
此为.inputForm.patchValue({
输入：'测试补丁'
})
}
}
标记为已解决，因为您的示例按预期工作，谢谢！更新模板驱动的元素怎么样？当我试图设置
input
的值时，我遇到了一个控制台错误，没有太多堆栈跟踪。@user3280523-对不起，我不理解你的问题。在答案中使用stackblitz，我可以在输入字段中输入，并记录在指令中，这就是你的意思吗？对不起，我不清楚。我已经更新了，请参见第29行，以及它在控制台中产生的错误。@user3280523-如果您将输入赋值移动到
ngOnInit
，它将修复错误。首先，谢谢你的额外帮助。非常感谢。我更新了stackblitz，你是对的错误消失了，但指令中没有检测到更新。这只是角度的限制吗？当然，有一种方法可以在一个与模型和模板驱动的表单配合良好的实现下工作。。。如果不是，那真的很令人沮丧
import { Directive, HostListener } from '@angular/core';

@Directive({
  selector: '[patchable-input]'
})
export class PatchableInputDirective  {
  @HostListener('ngModelChange', ['$event']) ngOnChanges($event) {
        console.log($event);
    }
}

import { Component, AfterViewInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms' 

@Component({
  selector: 'my-app',
  template:
  `
  <h5>Model form input</h5>
  <form [formGroup]="inputForm">
    <input patchable-input formControlName="input" />
  </form>

  <h5>Template form input</h5>
  <input patchable-input [(ngModel)]="input" />
  `
})
export class AppComponent implements AfterViewInit {
  inputForm = new FormGroup({
    input: new FormControl('')
  })

  input = '';

  ngAfterViewInit() {
    this.inputForm.patchValue({
      input: 'testing patch'
    })
  }
}