Ionic - ngModel 在 App Store 审核期间未提交密码字段

Question

我正在开发一个应用程序并愿意将其提交到应用程序商店，但我一直被拒绝，因为苹果审核团队无法使用我的演示帐户登录。

查看服务器日志后，似乎密码字段没有提交到我的后端

problem.spring.common.AdviceTraits Bad Request: 
Validation failed for argument [0] in public 
org.springframework.http.ResponseEntity<web.rest.UserJWTController$JWTToken> 
web.rest.UserJWTController.authorize(web.rest.vm.LoginVM): 
[Field error in object 'loginVM' on field 'password': rejected value []; 
codes [Size.loginVM.password,Size.password,Size.java.lang.String,Size]; 
arguments [org.springframework.context.support.DefaultMessageSourceResolvable: 
codes [loginVM.password,password]; arguments []; 
default message [password],100,4]; default message [个数必须在4和100之间]]

但是我在本地测试的时候，无法重现这个bug。

login.page.html

  <form class="login-form">
    <ion-input type="string" [(ngModel)]="account.username" name="username" placeholder="username"></ion-input>
    <ion-input type="password" [(ngModel)]="account.password" name="password" placeholder="password"></ion-input>
    <div style="width: 100%; height: 15px"></div>
    <ion-button expand="block" (click)="doLogin()" color="warning" fill="outline">login</ion-button>
  </form>

和我的login.page.ts

export class LoginPage implements OnInit {

  account: { username: string; password: string; rememberMe: boolean } = {
    username: '',
    password: '',
    rememberMe: true
  };

  constructor(
    public loginService: LoginService,
    public toastController: ToastController,
    public router: Router,
  ) {
  }

  ngOnInit() {
  }

  public doLogin() {
    this.loginService.login(this.account).then(
      () => {
        const toast = await this.toastController.create({
          message: 'log in success',
          duration: 3000,
          position: 'top'
        });
        await toast.present().then(() => history.back());
      },
      (err) => {
       \ some error handle 
  }
}

我认为可能是ngModel的问题，但即使我改成动态表单，apple仍然报告无法点击登录按钮，我猜是html之间的数据绑定模型坏了，但我真的找不到原因。

变更后：

    <form class="login-form" role="form" (ngSubmit)="doLogin()" [formGroup]="loginForm">
      <ion-input type="text" class="form-control" name="username" id="username" placeholder="邮箱"
                 formControlName="username"></ion-input>
      <ion-input type="password" class="form-control" name="password" id="password" placeholder="密码"
                 formControlName="password"></ion-input>
      <ion-button [disabled]="loginForm.invalid" type="submit" expand="block" color="warning" fill="outline">登录</ion-button>
    </form>

export class LoginPage implements OnInit {

  loginForm = this.fb.group({
    username: ['', [Validators.required, Validators.minLength(4), Validators.maxLength(20)]],
    password: ['', [Validators.required, Validators.minLength(4), Validators.maxLength(20)]],
    rememberMe: [true]
  });

  constructor(
    public loginService: LoginService,
    public toastController: ToastController,
    public router: Router,
    private fb: FormBuilder
  ) {
  }

  ngOnInit() {
  }

  public doLogin() {
    this.loginService.login({
      username: this.loginForm.get('username')!.value,
      password: this.loginForm.get('password')!.value,
      rememberMe: this.loginForm.get('rememberMe')!.value
    }).then(
      async () => {
        const toast = await this.toastController.create({
          message: 'login success',
          duration: 3000,
          position: 'top'
        });
        await toast.present().then(() => history.back());
      },
      async (err) => {
        \ some error handler
      }
    );
  }
}

离子信息

Ionic:

   Ionic CLI                     : 6.10.0 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.1.0
   @angular-devkit/build-angular : 0.803.26
   @angular-devkit/schematics    : 8.3.26
   @angular/cli                  : 8.3.26
   @ionic/angular-toolkit        : 2.2.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.1.0, ios 5.1.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 21 other plugins)

Utility:

   cordova-res : 0.14.0
   native-run  : 1.0.0

System:

   ios-deploy : 1.10.0
   ios-sim    : 8.0.2
   NodeJS     : v14.1.0 (/usr/local/Cellar/node/14.1.0/bin/node)
   npm        : 6.14.5
   OS         : macOS Catalina
   Xcode      : Xcode 11.5 Build version 11E608c

非常感谢任何解决此错误或让我在本地重现此错误的想法。

此致，

文杰

Answer 1

我将每个离子输入更改为原生 html 输入并解决了问题

Ionic - ngModel 在 App Store 审核期间未提交密码字段

Ionic - ngModel Not submitting the password field during the App Store review

ios

angular

cordova

ionic-framework

ionic5