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

Issue

I'm developing an App and willing to submit it to the App Store, but i keep got rejected because the apple review team can't login with my demo account.

After checked with server logs, it seems that the password field was not submitted to my backend

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之间]]

But when I test locally, I can't reproduce this 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>

and my 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 
  }
}

I thought it might be the problem with the ngModel, but even after I change to dynamic forms, apple reports that the login button can't be click, my guess was that the data binding between html and model was broken, but I really just can't find why.

after change:

    <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 info

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 ([email protected])
   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

I really appreciate for any thought to solve this bug or let me reproduce the bug locally.

Best regards,

Wenjie

Solution

I change every ion-input to native html input and solved the problem

Answered By - Wenjie Hou