Changing Input Element CSS based on Angular Reactive Forms validation

Question

I have a simple reactive form like this:

this.loginForm = this._fb.group({
  email: ['', [Validators.required, Validators.pattern('^[A-Za-z0-9._%+-][email protected]$')]],
  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:

The ng-valid/invalid CSS is being applied - But the CSS does not work for me I'm getting mixed signals here, is it being applied or not? — Jeremy Thille
– Jeremy Thille, Commented Jan 26, 2018 at 12:59
@JeremyThille sorry my English isn't that good. What I mean't was I am adding the valid/invalid code in css but its not taking effect. I hope that makes sense. — Skywalker
– Skywalker, Commented Jan 26, 2018 at 13:01
The problem is that the HTML code you provided does not match the CSS. There is no ng-valid or ng-invalid anywhere in the HTML markup — Jeremy Thille
– Jeremy Thille, Commented Jan 26, 2018 at 13:04
@JeremyThille Doesn't angular atomically add those classes to the input field? Upon inspect-element I can see the ng-valid, ng-touch etc classes added into the HTML. Please see my updated question. — Skywalker
– Skywalker, Commented Jan 26, 2018 at 13:06
I don't know exactly what Angular does to the classes, and I'm not sure it is relevant. All I can see is that currently, in the HTML code you wrote, nothing matches .ng-valid[required] or .ng-invalid[required]. — Jeremy Thille
– Jeremy Thille, Commented Jan 26, 2018 at 13:08

Iancovici · Accepted Answer · 2018-01-26 13:15:47Z

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;
}

edited Jan 26, 2018 at 13:15

answered Jan 26, 2018 at 12:37

Iancovici

5,7317 gold badges41 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Skywalker Over a year ago

Hi actually the form is there. I just didn't post the code as it was quite long. Apologies.

Skywalker Over a year ago

Removing the required makes all the input fields borders coloured.

Skywalker Over a year ago

Sorry what do you mean by enforcing everything immediately?

Iancovici Over a year ago

@Skywalker, just apply css only if it's been touched

Iancovici Over a year ago

@AhsanAyazm, I disagree, if this impacts a large project, then your project architecture needs to be revised, so the components are partitioned well. We're applying css style here to a single form-based component.

|

Muhammad Ahsan Ayaz · Accepted Answer · 2018-01-26 13:14:18Z

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 */
}

Collectives™ on Stack Overflow

Changing Input Element CSS based on Angular Reactive Forms validation

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related