Topic: Angular 8.2 / MDB 8.6 Forms Error

ewgiddings free asked 2 years ago


Expected behavior I have a form in an Angular 7 project and the form loads properly when I click register and the component loads.

Actual behavior In Angular 8 I get the following errors when I click the "Register" button:

RegisterComponent.html:41 ERROR TypeError: Cannot read property 'nativeElement' of null
at MdbInputDirective.ngAfterViewInit (ng-uikit-pro-standard.js:6447)

ERROR TypeError: Cannot read property 'querySelector' of undefined
at MdbInputDirective.initComponent (ng-uikit-pro-standard.js:6500)
at MdbInputDirective.ngAfterViewChecked (ng-uikit-pro-standard.js:6459)

Where RegisterComponent.html line 41 is:

<div class="md-form">

I am using a FormGroup and FormBuilder like:

registerForm: FormGroup;
private fb: FormBuilder
this.registerForm = this.fb.group({
  username: ['', [Validators.required, Validators.pattern('.*\\S.*[a-zA-z0-9_-]'), Validators.minLength(4), Validators.maxLength(30)]],
  knownAs: ['', [Validators.required, Validators.minLength(4), Validators.maxLength(75)]],
  email: ['', [Validators.required, Validators.email, Validators.minLength(4), Validators.maxLength(64)]],
  password: ['',
  [Validators.required, Validators.pattern('^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,}$'),
  Validators.minLength(8), Validators.maxLength(60)]],
  confirmPassword: ['',
  [Validators.required, Validators.pattern('^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,}$'),
    Validators.minLength(8), Validators.maxLength(60)]]
}, {validator: Validators.compose([this.passwordMatchValidator])}); 
this.createRegisterForm();

And the html looks like:

<form [formGroup]="registerForm" (ngSubmit)="register()">
      <div class="md-form">
    <i class="fa fa-user prefix grey-text"></i>
    <input data-error="Invalid input" data-success="Validated" type="text" class="form-control" id="RegisterCardKnownAs" formControlName="knownAs" maxlength="75" length="75" mdbCharCounter mdbInputDirective>
    <label for="RegisterCardKnownAs" class="font-weight-light">Known As</label>
  </div>
etc...</form>

Resources (screenshots, code snippets etc.) I am using the same form developing a new site that I do on this site: https://www.tragoa.com and then click Register For Free. I can send an email with a link to the project I am working on now.

Does anyone know what has changed or what I could be doing wrong given the information that I have? It seems it is something to do with using class="md-form"? Was there a change from Angular 7 to Angular 8 in MDB Forms / Angular Reactive Forms?

Thank you for any guidance you may be able to provide.


ewgiddings free commented 2 years ago

It seems it may be similar to this issue? https://mdbootstrap.com/support/angular/unable-to-load-notification/


Arkadiusz Idzikowski staff answered 2 years ago


MdbInputDirective is an old, deprecated directive that was responsible for input styles and its validation. Currently we use different directives for this use cases - mdbInput and mdbValidate.

We recommend to update your code because the MdbInputDirective will be removed in the future versions.


ewgiddings free commented 2 years ago

Hi, where can I find info on how to use MdbValidate? I use validators in my reactive forms so I’m curious what this does. Thank you for the info.


ewgiddings free answered 2 years ago


I think I may have found the issue for both the error I linked and my issue.

Was there a change to using mdbInput over mdbInputDirective? What is the difference?


ewgiddings free commented 2 years ago

The title of the docs still has mdbInputDirective (https://mdbootstrap.com/docs/angular/directives/input/) see the page title there, but the examples say mdbInput.


Arkadiusz Idzikowski staff commented 2 years ago

Thanks, we will fix that.



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

  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.6.0
  • Device: Surface
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: Yes