Поле ввода загрязнено и показывает валидацию красной границы только в IE11 (Angular8) - PullRequest
Новая
       21

Поле ввода загрязнено и показывает валидацию красной границы только в IE11 (Angular8)

0 голосов
/ 07 апреля 2020

Привет, ребята :) Это мой первый вопрос здесь, поэтому я надеюсь, что вы поймете это правильно.

На моем экране входа в систему у меня есть поля 'username' и 'password'. При загрузке сайта на 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) 

        ])
      ]
    });
  }

Ответы [ 2 ]

0 голосов
/ 09 апреля 2020

Это известная проблема, и в GitHub есть похожие темы. Вы можете сослаться на эту тему и эту тему .

Существует запрос на извлечение , чтобы добавить плагин событий ввода для устранения проблемы, но он не был объединен. Вы можете дождаться официального обновления Angular, исправляющего проблему. Если вы хотите иметь обходной путь, вы можете использовать нетронутые или нетронутые свойства .

0 голосов
/ 07 апреля 2020

Вы в вашем CSS пробовали это? - 

input:required:invalid {
    outline: none;
}
...