Topic: TextArea highlighted as touched after marking control as untouched

Jordan free asked 4 years ago


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.

https://imgur.com/7nbytLu


Arkadiusz Idzikowski staff answered 4 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.


Jordan free commented 4 years ago

Thanks for the response! That works!


Bartosz Termena staff answered 4 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 free commented 4 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.


Bartosz Termena staff answered 4 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:

enter image description here

Do you use any of your custom styles?

Best Regards, Bartosz.


Jordan free commented 4 years ago

I don't have any custom styles. Can I see your source code to compare to mine?



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • ForumUser: 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