Topic: TextArea highlighted as touched after marking control as untouched
Expected behavior TextArea should not be colored after marking the control as untouched.
Actual behavior TextArea highlighted as touched after marking the control as untouched
Resources (screenshots, code snippets etc.)
The example below show a text input vs text area that had the value patched and then marked as untouched.
Arkadiusz Idzikowski staff answered 5 years ago
It looks like there are some problems with textarea validation styles. We will fix that in the next version of MDB Angular (which should be relased next week). You can add those styles to your global styles.scss
file as a workaround for now:
.md-textarea.validate-success.ng-valid.ng-untouched.ng-pristine {
border-bottom: 1px solid #ced4da !important;
box-shadow: none !important;
}
.md-textarea.validate-success.ng-valid.ng-untouched.ng-pristine + label {
color: #757575 !important;
}
.md-textarea.validate-success.ng-valid.ng-dirty,
.md-textarea.validate-success.ng-valid.ng-touched {
border-bottom: 1px solid #00c851 !important;
box-shadow: 0 1px 0 0 #00c851 !important;
}
.md-textarea.validate-success.ng-valid.ng-dirty + label,
.md-textarea.validate-success.ng-valid.ng-touched + label {
color: #00c851 !important;
}
If your controls have values and you mark them as untouched, they are still marked as dirty and the validation styles will be applied for this state. If you want to reset validation styles completely, you need to mark the controls as untouched and pristine (or just reset them).
It's also possible to remove success or error validation with [validateSuccess]="false"
and [validateError]="false"
inputs.
Bartosz Termena staff answered 5 years ago
Dear @Jordan
I can not reproduce your problem, below is my textarea and input that had the value patched and then marked as untouched:
Do you use any of your custom styles?
Best Regards, Bartosz.
Jordan commented 5 years ago
I don't have any custom styles. Can I see your source code to compare to mine?
Bartosz Termena staff answered 5 years ago
Dear @Jordan
I used basic example from https://mdbootstrap.com/docs/angular/forms/textarea/
<div class="container">
<div class="row">
<div class="col-md-12">
<!--Basic textarea-->
<div class="md-form">
<textarea type="text" id="form7" class="md-textarea form-control" mdbInput></textarea>
<label for="form7">Basic textarea</label>
</div>
<div class="md-form">
<input mdbInput type="text" id="form1" class="form-control" />
<label for="form1" class="">Example label</label>
</div>
</div>
</div>
</div>
Best Regards, Bartosz.
Jordan commented 5 years ago
No - I wanted actual evidence of working TS/HTML that shows you can patch the value of the text area control without the success class being added. Or at least the ability to remove that class when the control is reset or mark as untouched.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 8.6.0
- Device: PC
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: Yes