根据Angular反应形式验证更改输入元素CSS

Question

I have a simple reactive form like this:

this.loginForm = this._fb.group({
  email: ['', [Validators.required, Validators.pattern('^[A-Za-z0-9._%+-]+@gmail.com$')]],
  password: ['', Validators.required]
});

The on HTML:

<!------------------------- PASSWORD FIELD ------------------------->
<div class="uk-margin">
  <input type="password" class="uk-input"
         placeholder="Enter Password" formControlName="password">

  <!----- VALIDATION WARNINGS ----->
  <div *ngIf="loginForm.get('password').touched">
    <div *ngIf="loginForm.get('password').hasError('required')">
      <div class="uk-text-danger"> Password is required.</div>
    </div>
  </div>
</div>

Then in CSS:

.ng-valid[required] {
   border: 5px solid #42A948;
 }

.ng-invalid[required] {
   border: 5px solid red; 
 }

The ng-valid/invalid CSS is being applied. I want to change the colour of the input fields border. But the CSS does not work form me. What am I doing wrong?

Update:

Answer 1

ng-invalid and ng-valid are always applied, you can customize css further to resolve this.

ng-valid.ng-touched {
  border: 5px solid #42A948;
}

ng-invalid.ng-touched {
  border: 5px solid red;
}

Answer 2

You could use [ngClass] for the conditional class based on the error. For example:

<!------------------------- PASSWORD FIELD ------------------------->
    <div class="uk-margin">
      <input
        type="password"
        class="uk-input"
        placeholder="Enter Password"
        formControlName="password"
        [ngClass]="{'has-error': loginForm.get('password').touched && loginForm.get('password').hasError('required')}">

      <!----- VALIDATION WARNINGS ----->
      <div *ngIf="loginForm.get('password').touched">
        <div *ngIf="loginForm.get('password').hasError('required')">
          <div class="uk-text-danger"> Password is required.</div>
        </div>
      </div>
    </div>

Then in CSS:

uk-input.has-error{
  /* your styles */
}