2

我正在开发 ionic 4 angular 移动应用程序。我面临一个奇怪的问题，其中自定义表单验证没有在 android 设备上被调用，而是被调用并按预期工作。

在详细介绍之后，如果输入类型是文本，那么它会导致问题，如果输入类型是密码，它就可以工作。

已确认以下几点

  • 控制台级别没有错误
  • 在 ios 设备上运行/使用 ionic serve 命令运行时相同的代码工作。

.ts 文件代码

   this.loginForm = new FormGroup({
      username: new FormControl('', Validators.required),
      password: new FormControl('', Validators.required)
    },this.loginFormValidator());

.html 文件代码

<fd-form-input-validation-message [errorType]="'error'" [errorVisible]="loginForm.errors?.username && loginForm.dirty ? 'true': 'false'" [errorMessage]="'Please enter username'">
                <input
                  #username
                  formControlName="username"
                  fd-form-control
                  type="text"
                  id="form-input-1"
                  name="username"
                  id="username"
                  autocapitalize="none"
                  autocomplete="off"
                  autocorrect="off"
                  required
                  type="text"
                  (keyup.enter)="onClickNext(password)"
                  [state]="loginForm.errors?.username && loginForm.dirty?'invalid':''"
                  placeholder="{{ 'LOGIN.USER_NAME_PLACEHOLDER' | translate }}"
                />
              </fd-form-input-validation-message>

验证功能码是

loginFormValidator(): ValidatorFn {
    debugger;
    console.log("validation function called");
    return (control: FormGroup): ValidationErrors | null => {
      const errors: ValidationErrors = {};
      if ((control.get('username').value.length>=1 && control.get('password').value.length>=1)) {
          this.footerButtonConfig.disableStatus=false;

      }
      else{ 
          this.footerButtonConfig.disableStatus=true;
          if(control.get('username').value.length==0 && control.get('username').dirty){
          errors.username = {
            message: 'Please enter username'
          };
        }
        if(control.get('password').value.length==0 && control.get('password').dirty){
          errors.password = {
            message: 'Please enter password'
          };
        }
      }
      return Object.keys(errors).length ? errors : null;
    };
  }

Package.json 是

    "@angular/core": "~8.1.2",
    "@angular/forms": "~8.1.2",
    "@angular/http": "^7.2.15",

如上所述，如果 type="password" 那么验证函数在所有 3 个平台（web、ios、android）上都被调用了这个问题的可能根本原因是什么？

4

0 回答 0