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() 调用此方法以显式处理更改检测及其副作用。