I have a login form and when I hit the username input field, iOS lets me use the keychain or 1Password to fill my credentials. I don’t use the native plugin.
All of this works fine, but there’s some issue with Angular’s change detection: My username + password aren’t updated and the data from the keychain isn’t visible in the input fields. There seems to be an issue with Angular’s change detection when inserting data from the keychain.
I have to focus the username field again. Then all of a sudden, the credentials are visible. But still: While the password seems to be fine and visible as dots, it isn’t actually bound to the model, although I use two-way data binding via <ion-input type="password" [(ngModel)]="password"></ion-input>
When I click the password field to “update” the model, Ionic’s behavior is to delete the password.
What works though is pasting a password from the clipboard.
Anyways: Anyone has a suggestion on how to trigger the change detection and have the models update correctly after iOS keychain is done?
So i had a similar issue, i used FormGroup for the login credentials, and when i tried to fill it with data from Keychain, the username was visible and the component got the value, the password was visible but did not got the value and also the placeholder was visible in the mean time.
I placed my question into the ionic slack group and there a guy named Jorrit answered this:
Based on that we figured out we need to use ngZone, so this is what we came up:
constructor(
private zone: NgZone
){}
ionViewDidLoad() {
this.zone.runOutsideAngular(() => {
document.getElementById('password').addEventListener('change', (event) => {
/* here you can get the data from the "event.target['value']", the below example is for FormGroup*/
this.loginForm.patchValue({
password: event.target['value']
})
});
});
}
