I've noticed that the validation state classes (.has-success, .has-warning, etc) seem to have been removed in bootstrap 5 as they are not working anymore and I can't find them in the bootstrap.css file.
Before, I could easily use these classes with a simple code snippet like the one 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>
Now, the code looks like 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>
It can be quite time-consuming to update a large number of forms and inputs with this change.
Thank you in advance for any help, and apologies for any formatting issues as this is my first time posting here.