0

I was wondering if bootstrap 5 removed the validation state classes (.has-success, .has-warning, etc) since it suddenly didn't work and I can't seem to find those classes on the bootstrap.css file.

Several months ago I could still use it and made a simple code like below:

<div class="form-group row mb-3" [ngClass]="{ 'has-error': !addOperator.controls['code'].valid && addOperator.controls['code']?.touched }">
  <label for="code" class="col-sm-3 important col-form-label">
    Company Code
  </label>
  <div class="col-sm-9">
    <input formControlName="code" type="text" class="form-control" placeholder="Company Code" required="" maxlength="120" aria-required="true">
    <span *ngIf="!addOperator.controls['code'].valid && addOperator.controls['code']?.touched"
             class="help-block col-sm-offset-4">
        Field is required
    </span>
  </div>
</div>

To this:

<div class="form-group row mb-3" >
  <label for="code" class="col-sm-3 important col-form-label" 
         [ngClass]="{'text-danger': !addOperator.controls['code'].valid &&
           addOperator.controls['code']?.touched }">
    Company Code
  </label>
  <div class="col-sm-9">
    <input formControlName="name" type="text"
           [ngClass]="{ 'is-invalid': !addOperator.controls['code'].valid && 
             addOperator.controls['code']?.touched }" class="form-control" 
           placeholder="Company Code" required="" maxlength="120" aria-required="true">
    <span *ngIf="!addOperator.controls['code'].valid && addOperator.controls['code']?.touched"
          class="help-block col-sm-offset-4" [ngClass]="{ 'text-danger': !addOperator.controls['code'].valid && addOperator.controls['code']?.touched }">
      Field is required
    </span>
  </div>
</div>

Where it's not very practical when I have to change a large number of forms and inputs.

Thanks in advance, and sorry for the terrible format it's my first time asking here.

Mahdi Zarei
  • 5,644
  • 7
  • 24
  • 54
Rexsaurs
  • 11
  • 4
  • Angular add the class `ng-valid`, `ng-invalid`... for you, see the [docs](https://angular.io/guide/form-validation#control-status-css-classes). So, I suggest you better than use ngClass, simply add class in your styles.css, e.g. `.ng-invalid.ng-touched{border-color:red}`. About the "error", you can check this [SO](https://stackoverflow.com/questions/50320169/bind-template-reference-variables-to-ngmodel-while-using-reactive-forms/70552891#comment124721207_70552891) to create a custom-error-component – Eliseo Jan 05 '22 at 08:35
  • If I remember correctly, `ng-valid` only works with the formcontrol (input) only, so I would still need the `ngClass` for the ` – Rexsaurs Jan 05 '22 at 09:51
  • Also works with template driven forms, but only work in "input" (really in FormControl, if you create a custom form control with label, the class is applied to the custom form control) a [simple stackblitz](https://stackblitz.com/edit/angular-ivy-ss6j6j?file=src%2Fapp%2Fapp.component.html) where mark as invalid de input – Eliseo Jan 05 '22 at 10:28

2 Answers2

1

has-error -> is-invalid

has-success -> is-valid

has-warning has been removed.

dizad87
  • 448
  • 4
  • 15
Casanova
  • 243
  • 2
  • 11
0

The validation classes .has-error, .has-warning, and .has-success were removed in v4.

From migration guide:

Replaced .has-error, .has-warning, and .has-success classes with HTML5 form validation via CSS’s :invalid and :valid pseudo-classes.

As per the v5 docs the validation classes work as below:

  • HTML form validation is applied via CSS’s two pseudo-classes, :invalid and :valid. It applies to <input>, <select>, and <textarea> elements.
  • Bootstrap scopes the :invalid and :valid styles to parent .was-validated class, usually applied to the . Otherwise, any required field without a value shows up as invalid on page load. This way, you may choose when to activate them (typically after form submission is attempted).
  • o reset the appearance of the form (for instance, in the case of dynamic form submissions using AJAX), remove the .was-validated class from the again after submission.
  • As a fallback, .is-invalid and .is-valid classes may be used instead of the pseudo-classes for server-side validation. They do not require a .was-validated parent class.

Angular does automatically add CSS classes .ng-valid, .ng-invalid for various form control statues, you can utilize them to customize the styles in your application. You can read more about different form control status classes here

Siddhant
  • 2,911
  • 2
  • 8
  • 14