0

大家好 :) 这是我在这里的第一个问题，所以我希望你能正确理解它。

在我的登录屏幕上，我有“用户名”和“密码”字段。在 IE 11 上加载站点时，第二个输入（“密码”）一直很脏，并显示红色边框验证，我不希望出现这种情况。当我删除占位符时，一切正常，但我需要那个占位符......

我已经研究了很多并应用了验证“模糊”（失焦）字段的指令，但我仍然只在 IE 11 上遇到了同样的问题。有人有合适的答案或我可以使用的解决方案吗？这是我的密码输入代码的示例（与用户名输入具有相同的属性）：

模板： 

<div class="column column-10-of-12">
        <att-input attTheme                        
                   validate-onblur
                   class="input--inline"
                   [shouldShowError]="carePortal.submitted"
                   formControlName="password"
                   (focus)="focusPassword()"
                   [id]="'password'"
                   [name]="'password'"
                   [type]="'password'"
                   placeholder="Password">
          <div [att-error-message]="loginForm.get('password')"
               #inputError>
            <att-error-label validator="minlength"
                             [errMessage]="'Password needs to be min 5 characters.'">
            </att-error-label>

          </div>
        </att-input>
      </div>

TS：

initializeLoginForm(): void {
    this.loginForm = this.formBuilder.group({
      userName: [
        '',
        Validators.compose([
          <any>Validators.required,
          Validators.pattern(this.usernamePattern)
        ])
      ],
      password: [ 
        '',
        Validators.compose([
          <any>Validators.required,
          <any>Validators.minLength(5) 

        ])
      ]
    });
  }
4

2 回答 2

0

这是一个已知问题，GitHub 中有类似的主题。你可以参考这个线程和这个线程。

有一个拉取请求来添加一个输入事件插件来解决这个问题，但它还没有被合并。您可以等待 Angular 官方更新该问题的修复程序。如果你现在想有一个解决方法，你可以使用touch 和 untouched properties。

于 2020-04-09T07:13:54.363 回答
0

你在你的 CSS 中试过这个吗？-

input:required:invalid {
    outline: none;
}
于 2020-04-07T14:46:31.653 回答