Ionic [Angular] - 反應形式：使用 setValue() selectionStart/End 后不會移動 cursor

Question

我想用放置“。”的輸入處理程序制作一個響應式表單。 發生鍵盤輸入后，在輸入字段的末尾簽名（通過 setValue()）。 同時我希望在輸入發生后 cursor 移動到輸入字段的開頭，我使用輸入標簽的“selectionStart/selectionEnd”屬性。

如果我使用普通的 html，一切正常。 但是使用離子輸入它不起作用，並且 cursor 在鍵盤輸入發生后移動到末尾。 作為另一個輸入的包裝器，我嘗試為初始離子輸入及其子輸入設置 selectionStart/selectionEnd 屬性，但沒有成功。

在ts文件中更改表單控件值后，如何使cursor移動到Ionic輸入中輸入字段的開頭？

主頁.ts：

export class HomePage {
  form = new FormGroup({
    amount: new FormControl(''),
  });
  constructor() {}

  amountHandler(event: any) {
    this.form.get('amount').setValue(event.target.value + '!');
    event.target.firstChild.selectionStart = 0;
    event.target.firstChild.selectionEnd = 0;
    //event.target.selectionStart = 0;
    //event.target.selectionEnd = 0;
  }
}

主頁.html：

<form [formGroup]="form">
  <ion-item>
    <ion-label>Amount: </ion-label>
    <ion-input
      (ionInput)="amountHandler($event)"
      formControlName="amount"
    ></ion-input>    
  </ion-item>
</form>

Answer 1

setValue()是異步處理的，即它發生在您的selectionStart之后。 嘗試在setValue()之后添加https://angular.io/api/core/ApplicationRef#tick 。

tick() 調用此方法以顯式處理更改檢測及其副作用。