Angular 4只读输入变化检测答案

【问题标题】：Angular 4 Readonly input change detectionAngular 4只读输入变化检测
【发布时间】：2019-07-09 07:41:58
【问题描述】：

我有以下带有只读输入的代码。如果此只读输入来自 TS 文件，我正在尝试更改该值，但是，我无法检测到任何函数的更改。下面是例子。

<input type="text" class="form-control" id="field1" name="field1" readonly [(ngModel)]="field1" (ngModelChange)="onChange()">

ngModelChange 在此场景中不起作用。

【问题讨论】：

你想捕捉什么用户类型？
您是否删除了只读属性并检查了 onChange() 是否触发？
你正在使用ngModelChange 也ngModel 为什么两个，双向绑定？
尝试使用（更改）而不是（ngModelChange）
我想根据值的变化执行某些功能。我试图删除只读，在这种情况下，如果用户在该特定字段中输入值，它就可以工作。但我的要求是在只读输入中捕获 TS 文件更改的值并执行功能。我希望它很清楚。

标签： javascript jquery html angular typescript

【解决方案1】：

您可以尝试使用(change) 而不是(ngModelChange)。

这里是some explanation，可以帮助您理解这一点。

【讨论】：

嗨@WomenWhoCode，我将继续在上面的评论中了解您要做什么。

【解决方案2】：

像这样使用输入：

(input)="handle($event)"

并相应地在您的打字稿中处理事件。

【讨论】：

【解决方案3】：

FormControl 来救援！！

FormControls 和响应式表单非常棒，它会为您节省一天的时间！ :)

在您的 app.module 中标记ReactiveFormsModule，将FormControl 导入到您的组件aaand...对于演示，我使用了一个简单的超时来更改值以触发valueChanges：

myControl = new FormControl('')

constructor() { }

ngOnInit() {
  setTimeout(() => {
    this.myControl.setValue('something');
  }, 2000);

  this.myControl.valueChanges.subscribe((data) => {
    console.log('changed!')
  });
}

和模板：

<input type="text" readonly [formControl]="myControl">

StackBlitz

P.S 如果输入是模板驱动表单的一部分，这将不起作用，因为 ngModel 和 formControl 不应该一起使用。所以你会收到通知。所以在这种情况下，我建议你采取被动的方式;)

【讨论】：