TextArea highlighted as touched after marking control as unt

Topic: TextArea highlighted as touched after marking control as untouched

Jordan free asked 5 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

Add comment

Arkadiusz Idzikowski staff answered 5 years ago

0 0 Best answer

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 <code>styles.scss</code> file as a workaround for now:

<pre class="prettyprint"><code>.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;
}
</code></pre>

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 <code>[validateSuccess]="false"</code> and <code>[validateError]="false"</code> inputs.

Please insert min. 20 characters.

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 5 years ago

Thanks for the response! That works!

Add comment

Bartosz Termena staff answered 5 years ago

0 0 Best answer

Please insert min. 20 characters.

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 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.

Add comment

Bartosz Termena staff answered 5 years ago

0 0 Best answer