登录表单中的 IoS 自动填充数据在 cordova 应用程序中为空(使用 Angular )

Question

Cordova 8/iOS 12/ Angular 6

我有一个带有登录表单的 cordova 应用程序。除此之外，一切都运行良好。

在 ios 上，当用户聚焦于表单时，apple 会提示用户输入已保存的密码。 当用户使用此 ios 自动填充功能时，表单不会检测到新值并且数据保持为空。 (但用户可以看到屏幕上显示的凭据)

这是我的登录表单:

 <form (ngSubmit)="login()" [formGroup]="loginForm">
        <input type="email" formControlName="username" name="username"/>
        <input type="password" formControlName="password" name="password"/>
        <button class="transparent-button primary">Login</button>
    </form>

在我的组件中:

 constructor(
    /* ... */
 ) {
  this.loginForm = formBuilder.group({
    username: ["", Validators.required],
    password: ["", Validators.required]
  });

};

login(){
    //this.loginForm.value.username and 
    this.loginForm.value.password stay empty when user 
    autofill
}

我也尝试过使用模板驱动的表单:同样的问题。 因此，Apple 现在阻止发布我的应用程序。 这是 ios/cordova 的已知问题吗？

谢谢

Answer 1

对于在 Ionic 5 中遇到此问题的任何人，此 fix成功了。我也在常规输入(而不是 ionic 输入)上对此进行了测试。

显然在执行自动填充后，Angular (change) 事件也会在没有焦点的输入字段上触发，这可以用来设置该表单字段的值。 (如下图):

<input ... (change)="form.controls[fieldName].setValue($event.target.value)">

如评论中所述，尽管 Ionic 3 存储库中提到了修复，但拥有该解决方案的用户(以及我自己)在 Ionic 5 中对其进行了测试。