Topic: Custom validation
<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!
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 5 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, DamianFREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: Yes
- Provided link: No
Damian Gemza staff commented 5 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, DamianReza Assar free commented 5 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 5 years ago
@Damian Gemza hellooooooo, Is there any other workaround?Reza Assar free commented 5 years ago
Hello!!!!!Dawid Adach pro commented 5 years ago
Have you checked this docs: https://mdbootstrap.com/angular/forms/input-validation/ ?Reza Assar free commented 5 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 5 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 5 years ago
Dear Reza, The problems which you're listing in a comment will be fixed with today's release. Best Regards, Damian