Topic: Angular 8.2 / MDB 8.6 Forms Error
ewgiddings asked 5 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.
Arkadiusz Idzikowski staff answered 5 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 commented 5 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 answered 5 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 commented 5 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 5 years ago
Thanks, we will fix that.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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
ewgiddings commented 5 years ago
It seems it may be similar to this issue? https://mdbootstrap.com/support/angular/unable-to-load-notification/