在登录表单IoS中自动填充数据是在应用科尔多瓦空（使用有角度的）

问题描述 投票：4回答：3

科尔多瓦8/12 IoS中/ 6角

我有一个登录表单的应用科尔多瓦。一切工作从这个分得很开。

在iOS中，用户通过苹果提示，当他专注的形式输入保存的密码。当用户使用该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
}

我也试图与模板驱动形式：同样的问题。苹果现在挡住了我的应用程序的发布因为这个原因。这是IOS /科尔多瓦的一个已知的问题？

谢谢

ios angular forms cordova login
3个回答
1
投票

FWIW，我有同样的问题，请参见下面我的解决方法。

我使用的反应形式，正在经历一个登录表单上的问题，我刚才一个用户名和密码输入。我实现了一个解决办法，我订阅表格上的变化，然后检测，如果本地密码值等于在变化的时间密码表单字段（技术上500毫秒后的变化，以等待自动填充输入密码值）。如果两个不同予手动覆盖与触发形式的验证天然值的形式的值。

希望这可以帮助别人！

// login-form.component.ts

import { Component, ViewChild, ElementRef } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'app-login-form',
  template: require('./login-form.component.pug')(),
  styleUrls: ['./login-form.component.scss'],
})
export class LoginFormComponent {

  protected loginForm: FormGroup;

  @ViewChild('password') public passwordRef: ElementRef;

  constructor(private _formBuilder: FormBuilder) {
    this.loginForm = this.getForm();

    // NOTE: this hack triggers form validation on iOS autofill
    this.loginForm.valueChanges
      // wait for 500ms to be sure the autofill is finished with the password field
      .debounceTime(500)
      .subscribe((changes) => {
        // manually fetch the value from nativeElement
        let passVal = this.passwordRef.nativeElement.value; //(<HTMLInputElement>document.querySelector('[name="password"]')).value;
        // if the value saved in the form is different from the input, manually update it
        if (passVal !== changes.password) {
          this.loginForm.get('password').setValue(passVal);
        }
      })
    ;
    // NOTE: this hack triggers form validation on iOS autofill
  }

  protected getForm(): FormGroup {
    return this._formBuilder.group({
      username: ['', [
        Validators.required,
        Validators.email,
      ]],
      password: ['', [
        Validators.required,
      ]],
    });
  }

  public onSubmit(login: FormGroup) {
    // ...
  }
}

// login-form.component.pug
// NOTE: pug + bootstrap 4

h1 Login
form([formGroup]="loginForm", (ngSubmit)="onSubmit(loginForm)")
  .form-group
    input.form-control(
      formControlName="username",
      name="username",
      type="email",
      placeholder="Username",
      autocomplete="on",
      autocorrect="off",
      autocapitalize="off",
      spellcheck="false",
    )

  .form-group
    input.form-control(
      #password,
      formControlName="password",
      name="password",
      type="password",
      placeholder="Password",
      autocomplete="on",
      autocorrect="off",
      autocapitalize="off",
      spellcheck="false",
    )

  input.mb-3.btn.btn-lg(
    type="submit",
    value="Login",
    [class.btn-outline-primary]="loginForm.valid",
    [class.btn-outline-secondary]="!loginForm.valid",
    [disabled]="!loginForm.valid",
  )
1
投票

我可以证实。我在使用ngModel离子同样的问题，但它也发生使用与formGroup你的代码。

<ion-item>
    <ion-label stacked>Benutzername</ion-label>
    <ion-input [(ngModel)]="username" id="un" type="text" autocomplete="on" autocorrect="on" clearInput="true" clearOnEdit="false"></ion-input>
</ion-item>
<ion-item>
    <ion-label stacked>Passwort</ion-label>
    <ion-input [(ngModel)]="password" id="pw" type="password" autocomplete="on" autocorrect="on" clearInput="true" clearOnEdit="false"></ion-input>
</ion-item>

属性自动完成和自动更正（Ionic Input Attributes）不影响IOS的自动填充功能。

示例应用程序：我已经创建使用Ionic Getting Started Guide来证明这个问题的示例应用程序：

Example Login App

当手工输入凭据，它们被存储在变量（用户名和密码），你可以在下面的图片中看到：Image 1

在iOS中的设置，设置自动填充的凭据并重新启动模拟器后，我只是点击进入用户名字段，并在键盘的最上面一栏点击“密码”。然后我就选择了用户填写，一切看起来还好吧并且填写正确，你可以在Image 2看到

然后我点击登录按钮和接收的用户名和密码变量的输出，如图Image 3

正如你所看到的，用户名场进我窃听以及使用的自动填充特征有其价值同步到它的变量。但是，密码字段（到我从来没有窃听的自动填充特征的因为...）不会在其数据同步到它的变量。

当我打入用手在密码字段和再次使用自动填充特征，数据被同步到其正确的变量：Image 4

同样的行为去周围的其他方法，只是攻到密码的字段中的自动填充特征。然后密码场同步其值设置为它的变量，但用户名场没有。

0
投票

这不是一个很好的解决方案，但它的工作暂时和苹果接受了我的应用程序。既然不能让自动填充才能正常工作，我禁用它：

我改变了我的密码输入到文本输入，所以建议没有自动填充建议。我也把自动更正，autocapitalize并自动完成属性了。

<form (ngSubmit)="login()" [formGroup]="loginForm">
    <input type="email" formControlName="username" name="username" autocorrect="off" autocapitalize="none" autocomplete="off"/>
    <input type="text" formControlName="password" name="password" autocorrect="off" autocapitalize="none" autocomplete="off" class="passwordInput"/>
    <button class="transparent-button primary">Login</button>
</form>

我在CSS中添加这个隐藏在输入文本和模拟一个真实的密码输入子弹：

.passwordInput {
  -webkit-text-security: disc;
}

真正等待真正的解决方案。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.