Topic: Custom validation

Reza Assar free asked 6 years 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 staff commented 6 years 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 free commented 6 years 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 free commented 6 years ago

@Damian Gemza hellooooooo, Is there any other workaround?

Reza Assar free commented 6 years ago

Hello!!!!!

Dawid Adach pro commented 6 years ago

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

Reza Assar free commented 6 years 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 free commented 6 years 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 staff commented 6 years ago

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

Reza Assar free answered 6 years 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 staff commented 6 years 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.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: No
Tags