Comments (9)
Finally decided to change from the below code from
<div class="form-group col-12 col-md-6 col-lg-6">
<label for="username"><small class="text-muted text-secondary">Username</small></label>
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
<input type="text"
formControlName="username"
class="form-control"
name="username"
placeholder="Username"
autocomplete="off">
</div>
</div>
TO
<div class="form-group col-12 col-md-6 col-lg-6">
<label for="username"><small class="text-muted text-secondary">Username</small></label>
<input type="text"
formControlName="username"
class="form-control **input-icon**"
name="username"
placeholder="Username"
autocomplete="off">
<i class="fa fa-user **iconspan**"></i>
</div>
Removed the nested div. And need to be real careful before I use any third-party packages.
.iconspan {
float: left;
margin-left: -6px;
margin-top: -37.8px;
position: relative;
z-index: 2;
/* color: green; */
/* color: #464a4c; */
color: blue;
padding: .65rem .75rem;
margin-bottom: 0;
font-size: 1rem;
line-height: 1.5;
text-align: center;
background-color: #eceeef;
border: 1px solid rgba(0,0,0,.15);
border-radius: .25rem;
}
.input-icon {
text-indent: 33px;
}
from ng-bootstrap-form-validation.
Yes, i found same behaviour too.
I tried to use
<bfv-messsages></bfv-messages>
tag but it didn't help me.
Validation function doesn't find my input.form-control element if i placed it deeper into the div.from-group.
I wrote an e-mail to developer, but i haven't recieved answer yet.
from ng-bootstrap-form-validation.
Same problem here after upgrading angular 9. The validation message does not appear however, it highlights the field having an issue but it does not say if the field is required or it does not meet the minimum length. I have a heavy dependency on this component in my application. Please let me know if someone finds something.
from ng-bootstrap-form-validation.
Version 9 is out and supports Angular V9! If you have any issues after upgrading let us know.
from ng-bootstrap-form-validation.
@kingcody This is still an issue.
<div class="form-group"><div><input class="form-control"/></div></div>
doesnt show the error message after Angular upgrade to 9.
This issue happens To be more specific, if
"angularCompilerOptions": {
"enableIvy": true,
}
turning off Ivy compiler shows the error messages correctly.
from ng-bootstrap-form-validation.
I have a same problem
from ng-bootstrap-form-validation.
is it solved?
from ng-bootstrap-form-validation.
Same situation here.
What i found:
If the input is the first one inside form-group it works
<div class="form-group"><input class="form-control"/></div>
but if it has any other element, it doen't
<div class="form-group"><div><input class="form-control"/></div></div>
from ng-bootstrap-form-validation.
I haven't been able to reproduce this issue. As long as <bfv-messages>
is inside the .form-group
I can manipulate where the messages show up.
from ng-bootstrap-form-validation.
Related Issues (20)
- How disable multiple error messages
- how to incorporate debouncy behavior preventing double submit
- Issue with [formControl] input HOT 1
- How to apply to checkbox with custom error message
- License text not package in node_modules
- Project is dead?
- Ability to hide error messages inside <bfv-messages></bfv-messages> HOT 2
- [Question] ngx-translate support? HOT 3
- [Question] Don't show validation errors until first submit
- Support Angular 8 HOT 1
- [Feature Request] Surface error value in CustomErrorMessages array
- [Question] Example for server-side errors
- [Question] Disable validation for some fields HOT 1
- [QUESTION] How can i get requiredLength attribute of Validators.minLength when i format error message
- [Question] How to work with cross field validation HOT 1
- [Question] setErrors doesn't show messages.
- Async validator don't call validSubmit function HOT 2
- Error message not showing when compiling with Ivy angular 9 HOT 3
- Custom error on form control with custom validator (AbstractControl, ValidatorFn)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ng-bootstrap-form-validation.