Custom validation

MDB SupportCategory: MDB AngularCustom validation
Reza Assar asked 2 months ago in MDB pro, version:6.1.2

I need to put custom validation in each input field containing several corresponding error messages.following pseudo-code gives the idea:

<input mdbInputDirective data-error=\"getErrorMessage()\" is-valid=\"someCustomValidations()\" ...>At the Present, I\'m using some thing like this:
<input mdbInputDirective data-error=\" \" ...>Error message and the way input validate it\'s value is unknown!
Damian Gemza replied 2 months ago

Dear Reza,
The problems which you’re listing in a comment will be fixed with today’s release.
Best Regards,
Damian

Reza Assar replied 2 months ago

By the way, @Directive sample was just a sample. not practical code.
It's just because of mimics how to accommodating custom message into data-error (based on your suggestion).

Reza Assar replied 2 months ago

Yes i have.

funny thing about this link(page) is:

data-error="Something went wrong…"

And
<div class="alert alert-danger" *ngIf="validatingForm.controls['required'].errors?.required">Custom Error</div>
user expect to see either "Something went wrong…" or "Custom Error" on invalid input. but "Wrong" will shown. and it's a little confusing.

I already have some custom validators and dedicated message for each.

Start your code here
<div [formGroup]="form">
<divclass="md-form">
<iclass="fa fa-user prefix"></i>
<inputmdbInputDirective
data-error=" " /////////////////////Or alternativily "wrong static message"
data-success=" "
class="form-control"
type="text"
id="username"
formControlName="Username">
<labelfor="username">{{UserNameText}}</label>
<!– <div class="invalid-feedback" *ngIf="InvalidUsername">
<div *ngIf="Username.errors.required">{{MainResource?.ItemIsRequired}}</div>
<div *ngIf="Username.errors.NoWhiteSpaceValidator && !Username.errors.required">{{MainResource.NoWhiteSpace}}</div>
<div *ngIf="Username.errors.minlength && !Username.errors.required && !Username.errors.NoWhiteSpaceValidator">{{MainResource.MinLengthRequired}}{{Username.errors.minlength.requiredLength}}</div>
<div *ngIf="Username.errors.NationalCodeValidator && !Username.errors.required && !Username.errors.NoWhiteSpaceValidator && !Username.errors.minlength">{{MainResource.InvalidNationalCode}}</div>
</div> –>
</div>
I have already commented *ngIf alert DIVs.

1) input shows green ribbon under input meanwhile it's touched and invalid.
2) Custom message which is associated with "data-error" should be dynamically changed.
Please let me know if you want any farther info and please give more robust answers (so i can understand which part of question has inadequacy).

Dawid Adach Pro UserPremium replied 2 months ago

Have you checked this docs: https://mdbootstrap.com/angular/forms/input-validation/ ?

Reza Assar replied 2 months ago

Hello!!!!!

Reza Assar replied 2 months ago

@Damian Gemza hellooooooo, Is there any other workaround?

Reza Assar replied 2 months ago

Unfortunately, changing "data-error" using "Renderer2" did not worked!
actually, changed value for "data-error" does not take effect.
i have created a directive named "CustomValidator" and applied it to desired input control.
Following code is simplified of CustomValidator:
import { Directive, Renderer2, ElementRef, OnInit } from '@angular/core';
import { NgControl } from '@angular/forms';

@Directive({
selector: '[CustomValidator]'
})
export class CustomValidatorDirective implements OnInit{

constructor(private renderer: Renderer2,
private el: ElementRef,
private control : NgControl) { }

ngOnInit(){
this.renderer.setAttribute(this.el.nativeElement, "data-error", "Foo");
}
}

Damian Gemza replied 2 months ago

Dear Reza,
I would advice you to use some method in which you’re checking the validation status of desired input. After checking if some validation is invalid, you’re changing data-error or data-success attribute dynamically by using Renderer2 class.
That should work fine.
Best Regards,
Damian

1 Answers
Reza Assar answered 2 months ago

Unfortunately, changing “data-error” using “Renderer2” did not worked!
actually, changed value for “data-error” does not take effect.
i have created a directive named “CustomValidator” and applied it to desired input control.
Following code is simplified of CustomValidator:

import { Directive, Renderer2, ElementRef, OnInit } from '@angular/core';
import { NgControl } from '@angular/forms';
@Directive({
  selector: '[CustomValidator]'
})
export class CustomValidatorDirective implements OnInit{
  constructor(private renderer: Renderer2, private el: ElementRef, private control : NgControl) { }
  ngOnInit(){
    this.renderer.setAttribute(this.el.nativeElement, "data-error", "Foo");
  }
}
Damian Gemza replied 2 months ago

Dear Reza Assar,
Could you please try to download our MDB Angular Pro 6.1.3 dev version from our git.mdbootstrap.com server? In 6.1.3 the whole validation has been rewritten, and maybe your case doesn’t exist in 6.1.3.
Please check 6.1.3 version.
Here’s the link to it: https://git.mdbootstrap.com/mdb/angular/ng-uikit-pro-standard
Best Regards,
Damian