Issue
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.
Solution
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
Answered By - Siddhant
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.