Did the Validation State classes (.has-error, etc) got removed from Bootstrap 5?-CodePudding

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  [ngClass]="{ 'has-error': !addOperator.controls['code'].valid && addOperator.controls['code']?.touched }">
  <label for="code" >
    Company Code
  </label>
  <div >
    <input formControlName="code" type="text"  placeholder="Company Code" required="" maxlength="120" aria-required="true">
    <span *ngIf="!addOperator.controls['code'].valid && addOperator.controls['code']?.touched"
             >
        Field is required
    </span>
  </div>
</div>

To this:

<div  >
  <label for="code"  
         [ngClass]="{'text-danger': !addOperator.controls['code'].valid &&
           addOperator.controls['code']?.touched }">
    Company Code
  </label>
  <div >
    <input formControlName="name" type="text"
           [ngClass]="{ 'is-invalid': !addOperator.controls['code'].valid && 
             addOperator.controls['code']?.touched }"  
           placeholder="Company Code" required="" maxlength="120" aria-required="true">
    <span *ngIf="!addOperator.controls['code'].valid && addOperator.controls['code']?.touched"
           [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.

CodePudding user response：

has-danger -> is-invalid

has-success -> is-valid

has-warning has been removed.

CodePudding user response：

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 , , and 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