Input field is dirty and shows red border validation only in IE11 (Angular8)

Question

Hi guys :) This is my first question here, so I hope that you will understand it properly.

On my login screen I have 'username' and 'password' fields. When loading the site on IE 11 the second input ('password') is dirty all the time and shows red border validation, which I don't want there. When I remove a placeholder everything works fine, but I need that placeholder...

I have researched a lot and applied directive that validate fields on 'blur' (out of focus), but I still had the same problem only on IE 11. Does anybody have appropriate answer or a solution that I can use? Here is an example of my password input code (which has the same properties as username input):

TEMPLATE:

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

        ])
      ]
    });
  }

Answer 1

Have you in your CSS tried this? -

input:required:invalid {
    outline: none;
}

Answer 2

It's a known issue and there're similar threads in GitHub. You could refer to this thread and this thread.

There's a pull request to add an input event plugin to fix the issue, but it hasn't been merged. You could wait for the Angular official updating the fix of the issue. If you want to have a workaround for now, you could use touched and untouched properties.