Question

我有以下带有只读输入的代码。我正在尝试从TS File的此只读输入更改值，但是，我无法检测到任何功能的更改。下面是示例。

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

ngModelChange在此Senario中不起作用。

Answer 1

您可以尝试使用(change)代替(ngModelChange)。

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

Answer 2

使用这样的输入：

(input)="handle($event)"

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

Answer 3

FormControl来营救！

FormControls和Reactive表单很棒，它将节省您的时间！：）

在您的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不应一起使用。因此，您将收到通知。因此，在这种情况下，我建议您采取被动方式；）

Angular 4只读输入更改检测

3 个答案: