1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: ERROR OR SUCCESS MESSAGES FOR INPUTS DON'T WORK AS EXPECTED

Lesther Caballero pro asked 6 years ago

I followed the doc on https://mdbootstrap.com/angular/components/inputs/#introduction which said : To display error or success messages, add the <small> tags below your <label> tags, with class="text-danger" or class="text-success" inside. I exactly did that. But this is what I have:  https://drive.google.com/file/d/1YIvDV0jeeXMMvSRCOxT-guNvkvJ9jMDV/view?usp=sharing which doesn't look like in your docs. Besides, I'd like to know how to edit the "wrong", "write" text to display something different

 

 

Damian Gemza staff answered 6 years ago

Dear Lesther, If you want to write your's own custom validation, I advice you to use something like 'Validators': https://blog.thoughtram.io/angular/2016/03/14/custom-validators-in-angular-2.html But it's quite hard to code that. So if you need just simple validation like this what you have shown on printscreen, you can use your's way :) In my opinion, whole topic is solved, so i'm shutting it down. If you need more informations, just write another post here in this topic. Best Regards, Damian

Lesther Caballero pro commented 6 years ago

I just wanted to find a way to integrate my custom validations with the input style from mdbootstrap library. Thanks :)

Damian Gemza staff answered 6 years ago

Dear Lesther,

I don't know if I understand your's issue. Do you want to know how to enter custom text in <small> tags? If yes, look at code below:

 

<div class="md-form">

<input mdbActive type="text" id="form1" class="form-control">

<label for="form1" class="">Example label</label>

<small class="text-danger">Sample Danger</small>

</div>

If you need to do more, just write to me.

Best Regards,

Damian

Lesther Caballero pro commented 6 years ago

I used your code and this is what I got: <a href="https://drive.google.com/file/d/1QGEBZsAklqKGSfRNNakEHQEMqW9qSaQ1/view?usp=sharing&quot" rel="nofollow">https://drive.google.com/file/d/1QGEBZsAklqKGSfRNNakEHQEMqW9qSaQ1/view?usp=sharing&quot</a>; Is this how it should look like? I thought it'd look exactly like this: <a href="https://drive.google.com/file/d/1kpdDoOJX8r62kylX3l942AUOw0NsQ3uc/view?usp=sharing&quot" rel="nofollow">https://drive.google.com/file/d/1kpdDoOJX8r62kylX3l942AUOw0NsQ3uc/view?usp=sharing&quot </a> with the exact same red line and with a customized text saying "Sample Danger" . Is it possible to achieve that

Damian Gemza staff commented 6 years ago

Dear Lesther, on which browser do you test that? On every browser except Firefox it looks like on printscreen3, but you have to add blank tags. If you want to edit this warnings, you have to edit our .ts file: input-validate.directive.ts . This file is in src/inputs/ directory. We'll trying to fix problem with Firefox. EDIT: On our github on branch 'dev' i've put fix for firefox. You can download new package. Now everything should works good. Best Regards, Damian

Lesther Caballero pro commented 6 years ago

I tested it on chrome. What do you mean by adding blank tags? So it's not possible to write custom validations with custom texts? like this: https://drive.google.com/file/d/14tDK4BtsEWc613hzbxtambnHIKJxrjjP/view?usp=sharing That is what I'm trying to achieve

Lesther Caballero pro commented 6 years ago

I want create a custom validation with mdbootstrap input style. Is that possible?

Lesther Caballero pro commented 6 years ago

Looking at the library I found a solution to get what I need with the classes counter-danger and inputVal : <pre>  <div class="md-form"> <i class="fa fa-envelope prefix"></i> <input mdbActive type="text" class="form-control counter-danger" id="form9" name="email"> <span class="inputVal text-danger">invalid format</span> <label class="active" for="form9">Type your e-mail</label> </div></pre> This is what I get: <a href="https://drive.google.com/file/d/1IGdpGArUakk7Dw3rywdnatH-pD08wwWw/view?usp=sharing" rel="nofollow">https://drive.google.com/file/d/1IGdpGArUakk7Dw3rywdnatH-pD08wwWw/view?usp=sharing</a> Now I can activte those classes with custom validations. If there's an easier way, please let me know. Thanks!
Write
Create snippet
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: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: Yes
Tags
About author
Lesther Caballero
Pro User 6Support score
3Questions 0Answers 0Snippets