Issue
I have prepared on StackBlitz (https://stackblitz.com/edit/angular-ivy-iuif7k?file=src/app/app.component.ts) a very simple app with form containing one input field and one submit button. The code contains classic validation for the required username field in validation-form.component.html
. The input field contains the dynamic class initialization [ngClass]="{ 'is-invalid': submitted && f['username'].errors }"
.
Validation (after pressing Submit
button) is working fine (displaying Username is required
- when input field is left empty) until I remove from input field the above class [ngClass]="{ 'is-invalid': submitted && f['username'].errors }"
. After removing that class, validation does not display an error anymore when I press submit button.
Is this by design or it is a genuine bug in Angular?
Solution
The error element is there even when you remove ngClass
, It just doesn't display because the default class you have .invalid-feedback
has display: none
Remove .invalid-feedback
class and you will see it working with or without ngClass
It works with ngClass
because when you submit without entering the value ngClass
gets satisfied and is-invalid
class gets added, and this class has display:block
which overrides display:none
Answered By - Sameer
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.