Custom validation

Reza Assar asked 4 months ago

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 commented 4 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


Reza Assar commented 4 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");
}
}


Reza Assar commented 4 months ago

@Damian Gemza hellooooooo, Is there any other workaround?


Reza Assar commented 4 months ago

Hello!!!!!


Dawid Adach commented 4 months ago

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


Reza Assar commented 4 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).


Reza Assar commented 4 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).


Damian Gemza commented 4 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 answered 4 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 commented 4 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


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: No