Topic: Angular MDB Inputs Validation malfunctioning

Verzea pro asked 4 years ago


Hello, I am using the Inputs with Validation options on MDB Angular. I am using the code exactly as provided on the site:
<form>
  <div class="md-form">
    <i class="fa fa-envelope prefix"></i>
    <input mdbActive data-error="wrong email" data-success="valid email" minLength="8" maxLength="25" type="email" class="form-control" id="form9" name="email" mdbInputValidate>
    <label for="form9">Type your e-mail</label>
  </div>

  <div class="md-form">
    <i class="fa fa-lock prefix"></i>
    <input mdbActive data-error="wrong password" data-success="valid password" minLength="10" maxLength="25" type="password" class="form-control" id="form10" name="password" mdbInputValidate>
    <label for="form10">Type your password</label>
  </div>
</form>  
I have an issue in that Validation updates the field correctly, but not the icon. The icon is blue when it should be red (error) and red when it should be blue (correct). I can't attach a screenshot here to show you. Do you have the code that makes the icon validation be in synch with the field validation?   Thanks,   Alex

Damian Gemza staff answered 4 years ago


Dear Verzea, Icons changed their color to blue when input's value is not empty, and when you blur them, or to black when value of input is empty. They won't change colors to green / red with validation. But it's quite a nice feature, and we'll think about implementing this in our future releases. Best Regards, Damian

Verzea pro commented 4 years ago

Hi Damian, I have an app where the fields are from Angular Material 2+. They use validators like ng-pristine, ng-dirty, etc. I would like to implemented the behaviour above by listening for class changes on the Angular Material 2+ fields and adapting the MDB fields depending on how the state changes on AM2+. Do you know of a way to listen for class changes on mat-form-field (AM2+)? Thanks, Alex

Damian Gemza staff commented 4 years ago

Dear Verzea, Unfortunately, I never used AM2 in my projects, so I can't help you with this. If you'll have more questions about our MDB Angular, feel free to post it, and I'll try to help you with it, but I'm unable to help you with AM2 because I don't know this project. Best Regards, Damian

FREE CONSULTATION

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

Status

Closed

Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags