Angular 4只讀輸入更改檢測

Question

我有以下帶有只讀輸入的代碼。 我正在嘗試從TS File的此只讀輸入更改值，但是，我無法檢測到任何功能的更改。 以下是示例。

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

ngModelChange在此Senario中不起作用。

Answer 1

您可以嘗試使用(change)而不是(ngModelChange) 。

這里有一些解釋可以幫助您理解這一點。

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

PS，如果輸入此內容是模板驅動的表單的一部分，則這將無法工作，因為ngModel和formControl不應一起使用。 因此，您將收到通知。 因此，在這種情況下，我建議您采取被動方式；）