Customizing input element styling with Angular Reactive Forms validation rules

Question

Customizing input element styling with Angular Reactive Forms validation rules

My current reactive form setup is as follows:

this.loginForm = this._fb.group({
  email: ['', [Validators.required, Validators.pattern('^[A-Za-z0-9._%+-]<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="99b2d9fef4f8f0f5b7faf6f4">[email protected]</a>$')]],
  password: ['', Validators.required]
});

Regarding the HTML structure:

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

In terms of CSS styling:

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

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

The ng-valid/invalid CSS rules are not changing the input field border color as expected. I'm unsure what I might be doing incorrectly. Can anyone provide assistance?

Update:

https://i.sstatic.net/W3jX8.png

javascript html css angular

Answer 1

Answer №1

ng-invalid and ng-valid classes are automatically applied, but you have the freedom to adjust the CSS to better suit your needs.

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

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

Answer 2

ng-invalid and ng-valid classes are automatically applied, but you have the freedom to adjust the CSS to better suit your needs.

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

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

Answer 3

Answer №2

To implement conditional classes based on errors, you can utilize [ngClass]. Here is an 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>

Make sure to define the styles in your CSS for uk-input.has-error:

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

Answer 4

To implement conditional classes based on errors, you can utilize [ngClass]. Here is an 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>

Make sure to define the styles in your CSS for uk-input.has-error:

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

Customizing input element styling with Angular Reactive Forms validation rules

Answer №1

Answer №2

Similar questions

The click event in jQuery is being blocked by the use of "display:none

Embedding PHP script within HTML code can enhance website functionality and

Make the background extend all the way down to the bottom of the page, whether it scrolls or

Unable to activate nb-checkbox from Nebular theme in Angular due to unspecified issue

Sort posts alphabetically by their first letter using jQuery

Fixing W3 Validation Errors in your Genesis theme through CSS requires a few simple steps. Let's

Ways to use the v-if directive to render conditionally based on a property, even if the object may be undefined

What's the reason for the align-self: flex-end CSS property not working as expected on a flex div element?

Vue Labyrinthine Design theme

Tips for creating a concise summary of written content

When I type text into the form field, JavaScript causes a disruption in the form

Each time I use console.log to display a user's radio button choice, the output is consistently lagging by one step

Creating a versatile Nuxt build that can be used across multiple environments

Is it possible to implement the 'opacity' feature on the homepage of my HTML website?

Vue: Customize data based on userAgent

Perform the Checkbox action when it is marked

The event listener for 'ended' is triggering multiple times

Loop through the geometry's index and set each value

The CSS menu dropdown fails to function properly on desktop view when there is longer content present

Having trouble with a basic node.js server test - no results being shown