1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: combine input validations

msgCH pro asked 5 years ago

Hi,

we would like to combine different input validations on one textfield like:

minValue, maxValue, minLength and maxLength.

We thought that the following Code would work but now we get an errror. How can we combine different validation

<form [formGroup]="validatingForm">
<div class="md-form">
    <input type="text" id="form2" class="form-control" data-error="wrong text" data-success="right text" formControlName="customvalidator">
    <label mdbInputDirective [mdbValidate]="false" for="form2">validator</label>
    <div *ngIf="validatingForm.controls['customvalidator'].touched">
      <div class="alert alert-danger" *ngIf="validatingForm.controls['customvalidator'].errors?.minlength">to Short Error</div>
      <div class="alert alert-danger" *ngIf="validatingForm.controls['customvalidator'].errors?.maxlenght">to long Error</div>
      <div class="alert alert-danger" *ngIf="validatingForm.controls['customvalidator'].errors?.min">Min Value Error</div>
      <div class="alert alert-danger" *ngIf="validatingForm.controls['customvalidator'].errors?.max">Max Value Error</div>
    </div>
  </div>
</form>
this.validatingForm = fb.group({
    'customvalidator': [null,
        Validators.minLength(4),
        Validators.maxLength(4),
        Validators.min(1900),
        Validators.max(2100)  ],
});

Thanks

best regards

Robert

Damian Gemza staff commented 5 years ago

Dear Robert, What's wrong exactly? Which errors you're facing up? Please paste me here some error log, or describe me actual behavior. Best Regards, Damian

msgCH pro answered 5 years ago

I found the problem. I had no square bracket around the Validators and after the first null parameter.

this.validatingForm = fb.group({
     'customvalidator': [null ,[
         Validators.minLength(4),
         Validators.maxLength(4),
         Validators.min(1900),
         Validators.max(2100)]],
 });

Is it correct that the minLenght and the maxLenth doesn't work when i use

<input type="number".....

So i would use the normal Textinput with a keyup event that allows only numbers and no letters. Is that correct.

 

Damian Gemza staff commented 5 years ago

Dear msgCH, You have to read more about validators and types of inputs on the Internet. Do you need more help with our product? Best Regards, Damian

xzesstence pro commented 5 years ago

So it seems that Form Validation in MDBootstrap Examples is wrong!

https://mdbootstrap.com/docs/angular/forms/validation/

See .TS in first example

 

Really annoying that as a pro user you have the same problems like in bad written free components.

Unsatisfying.. Far too expensive for what you get here

When i buy something i expect it to work properly!

 

Even when you add brackets it does not work @ Angular MDBootstrap

msgCH pro answered 5 years ago

Dear Damian, I build a small webpage withe the example in my former post. At the Browser-Console I get the following Error:   
core.js:1601 ERROR Error: Uncaught (in promise): Error: Expected validator to return Promise or Observable.
Error: Expected validator to return Promise or Observable.
at toObservable (forms.js:637)
at FormControl.push../node_modules/@angular/forms/fesm5/forms.js.AbstractControl._runAsyncValidator (forms.js:2635)
at FormControl.push../node_modules/@angular/forms/fesm5/forms.js.AbstractControl.updateValueAndValidity (forms.js:2606)
at new FormControl (forms.js:2982)
at FormBuilder.push../node_modules/@angular/forms/fesm5/forms.js.FormBuilder.control (forms.js:6036)
at FormBuilder.push../node_modules/@angular/forms/fesm5/forms.js.FormBuilder._createControl (forms.js:6078)
at forms.js:6062
at Array.forEach (<anonymous>)
at FormBuilder.push../node_modules/@angular/forms/fesm5/forms.js.FormBuilder._reduceControls (forms.js:6061)
at FormBuilder.push../node_modules/@angular/forms/fesm5/forms.js.FormBuilder.group (forms.js:6006)
at toObservable (forms.js:637)
at FormControl.push../node_modules/@angular/forms/fesm5/forms.js.AbstractControl._runAsyncValidator (forms.js:2635)
at FormControl.push../node_modules/@angular/forms/fesm5/forms.js.AbstractControl.updateValueAndValidity (forms.js:2606)
at new FormControl (forms.js:2982)
at FormBuilder.push../node_modules/@angular/forms/fesm5/forms.js.FormBuilder.control (forms.js:6036)
at FormBuilder.push../node_modules/@angular/forms/fesm5/forms.js.FormBuilder._createControl (forms.js:6078)
at forms.js:6062
at Array.forEach (<anonymous>)
at FormBuilder.push../node_modules/@angular/forms/fesm5/forms.js.FormBuilder._reduceControls (forms.js:6061)
at FormBuilder.push../node_modules/@angular/forms/fesm5/forms.js.FormBuilder.group (forms.js:6006)
at resolvePromise (zone.js:814)
at resolvePromise (zone.js:771)
at zone.js:873
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:4062)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
at drainMicroTaskQueue (zone.js:595)
at push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask (zone.js:500)
at ZoneTask.invoke (zone.js:485)
defaultErrorLogger @ core.js:1601
push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:1650
next @ core.js:4736
schedulerFn @ core.js:3721
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:253
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:191
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:129
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:93
push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:53
push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:3713
(anonymous) @ core.js:4093
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138
push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ core.js:4030
onHandleError @ core.js:4093
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.handleError @ zone.js:392
push../node_modules/zone.js/dist/zone.js.Zone.runGuarded @ zone.js:154
_loop_1 @ zone.js:677
api.microtaskDrainDone @ zone.js:686
drainMicroTaskQueue @ zone.js:602
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:500
ZoneTask.invoke @ zone.js:485
timer @ zone.js:2054
setTimeout (async)
scheduleTask @ zone.js:2075
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:407
onScheduleTask @ zone.js:297
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:401
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:232
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask @ zone.js:255
scheduleMacroTaskWithCurrentZone @ zone.js:1114
(anonymous) @ zone.js:2090
proto.(anonymous function) @ zone.js:1394
(anonymous) @ router.js:3488
schedulerFn @ core.js:3721
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:253
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:191
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:129
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:93
push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:53
push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:3713
(anonymous) @ common.js:143
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:421
onInvokeTask @ core.js:4062
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:420
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:188
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:496
invokeTask @ zone.js:1540
globalZoneAwareCallback @ zone.js:1566
Thanks Best regards Robert
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: No
  • Provided link: No
Tags
About author
msgCH
Pro User 12Support score
2Questions 4Answers 0Snippets