Modals - Login Dialog - Material Design for Bootstrap

Topic: Modals - Login Dialog

karl-heinz reichel free asked 5 years ago

Expected behavior When I try to use the example the modal login dialog will be shown

Actual behavior I got an error message in Chrome and the dialog will not been shown at all

It seems that the formControl will not be found in the according ts file.

Resources (screenshots, code snippets etc.)

Uncaught Error: Template parse errors:

No provider for NgControl ("-form mb-4">
            <mdb-icon fas icon="lock" class="prefix grey-text"></mdb-icon>
            [ERROR ->]<input type="password" id="defaultForm-pass" [formControl]="loginFormModalPassword" class="form-contr"): ng:///AppModule/LoginDialogComponent.html@29:12

TS File:

import {Component, OnInit, Input} from '@angular/core';
import {FormControl, FormGroup, Validators} from '@angular/forms';
import {LoginDialogService} from '../login-dialog.service';

@Component({
  selector: 'app-login-dialog',
  templateUrl: './login-dialog.component.html',
  styleUrls: ['./login-dialog.component.scss']
})

export class LoginDialogComponent implements OnInit {

  validatingForm: FormGroup;

  @Input()
  showDialog : boolean;

  constructor() {
  }

  ngOnInit() {
    this.validatingForm = new FormGroup({
      loginFormModalEmail: new FormControl('', Validators.email),
      loginFormModalPassword: new FormControl('', Validators.required)
    });
  }

  get loginFormModalEmail() {
    return this.validatingForm.get('loginFormModalEmail');
  }

  get loginFormModalPassword() {
    return this.validatingForm.get('loginFormModalPassword');
  }
}

HTML File

<div *ngIf="showDialog">

  <div mdbModal #frame="mdbModal" class="modal fade left" id="frameModalTop" tabindex="-1" role="dialog"
       aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header text-center">
          <h4 class="modal-title w-100 font-weight-bold">Sign in</h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="frame.hide()">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body mx-3">
          <div class="md-form mb-5">


            <label for="defaultForm-email">Your email</label>
            <mdb-error
              *ngIf="loginFormModalEmail.invalid && (loginFormModalEmail.dirty || loginFormModalEmail.touched)">
              Input invalid
            </mdb-error>
            <mdb-success
              *ngIf="loginFormModalEmail.valid && (loginFormModalEmail.dirty || loginFormModalEmail.touched)">Input
              valid
            </mdb-success>
          </div>

          <div class="md-form mb-4">
            <mdb-icon fas icon="lock" class="prefix grey-text"></mdb-icon>
            <input type="password" id="defaultForm-pass" [formControl]="loginFormModalPassword" class="form-control"
                   mdbInput mdbValidate>
            <label for="defaultForm-pass">Your password</label>
            <mdb-error
              *ngIf="loginFormModalPassword.invalid && (loginFormModalPassword.dirty || loginFormModalPassword.touched)">
              Input invalid
            </mdb-error>
            <mdb-success
              *ngIf="loginFormModalPassword.valid && (loginFormModalPassword.dirty || loginFormModalPassword.touched)">
              Input valid
            </mdb-success>
          </div>

        </div>
        <div class="modal-footer d-flex justify-content-center">
          <button mdbBtn color="default" class="waves-light" mdbWavesEffect>Login</button>
        </div>
      </div>
    </div>
  </div>
</div>

Add comment

Bartosz Termena staff answered 5 years ago

0 0 Best answer

Dear @karl-heinz reichel

To make this work you'll have to import the ReactiveFormsModule in your app.module.ts @NgModule:

...
import { ReactiveFormsModule, ... } from '@angular/forms';

@NgModule({
  imports: [..., ReactiveFormsModule, ...],
  ...
})
export class ViewsModule {...}

Hope it helps!

Best, Bartosz

Add comment

Arkadiusz Idzikowski staff answered 5 years ago

0 0 Best answer

If your controls are inside formGroup, you should use formControlName instead of [formControl]:

formControlName="loginFormModalEmail"

Add comment

karl-heinz reichel free answered 5 years ago

1 0 Best answer

Hi Bartosz, thanks a lot, this import did the job

best regards Karl-Heinz

Add comment

karl-heinz reichel free answered 5 years ago

0 0 Best answer

Hi Bartosz, i came a step further, the probleme arises through [formControl]="loginFormModalEmail" It seems the compiler cannot resolve the FormControls ?

When I remove that statement, the validators complain, but the dialog will be visible

Regards Karl-Heinz

Add comment

karl-heinz reichel free answered 5 years ago

0 0 Best answer

<p>Hi Bartosz,
I replaced my code with yours, the problem remains </p>

<pre class="prettyprint"><code>compiler.js:2175 Uncaught Error: Template parse errors:
No provider for NgControl ("-form mb-5">
            <mdb-icon fas icon="lock" class="prefix grey-text"></mdb-icon>
            [ERROR ->]<input
              type="email"
              id="defaultForm-email"
"): ng:///AppModule/LoginDialogComponent.html@29:12
No provider for NgControl ("-form mb-4">
            <mdb-icon fas icon="lock" class="prefix grey-text"></mdb-icon>
            [ERROR ->]<input
              type="password"
              id="defaultForm-pass"
"): ng:///AppModule/LoginDialogComponent.html@57:12
    at syntaxError (compiler.js:2175)
    at TemplateParser.parse (compiler.js:11388)
    at JitCompiler._parseTemplate (compiler.js:25961)
    at JitCompiler._compileTemplate (compiler.js:25949)
    at compiler.js:25893
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (compiler.js:25893)
    at compiler.js:25806
    at Object.then (compiler.js:2166)
    at JitCompiler._compileModuleAndComponents (compiler.js:25805)
</code></pre>

Please insert min. 20 characters.

Hi Bartosz, I replaced my code with yours, the problem remains

compiler.js:2175 Uncaught Error: Template parse errors:
No provider for NgControl ("-form mb-5">
            <mdb-icon fas icon="lock" class="prefix grey-text"></mdb-icon>
            [ERROR ->]<input
              type="email"
              id="defaultForm-email"
"): ng:///AppModule/LoginDialogComponent.html@29:12
No provider for NgControl ("-form mb-4">
            <mdb-icon fas icon="lock" class="prefix grey-text"></mdb-icon>
            [ERROR ->]<input
              type="password"
              id="defaultForm-pass"
"): ng:///AppModule/LoginDialogComponent.html@57:12
    at syntaxError (compiler.js:2175)
    at TemplateParser.parse (compiler.js:11388)
    at JitCompiler._parseTemplate (compiler.js:25961)
    at JitCompiler._compileTemplate (compiler.js:25949)
    at compiler.js:25893
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (compiler.js:25893)
    at compiler.js:25806
    at Object.then (compiler.js:2166)
    at JitCompiler._compileModuleAndComponents (compiler.js:25805)

Add comment

Bartosz Termena staff answered 5 years ago

0 0 Best answer

<p>Dear <a href="/profile/?id=74355" target="_blank" rel="nofollow">@karl-heinz reichel</a></p>

<p>You have to call the <code>show()</code> method to show <code>#frame</code> modal, otherwise it will be not visible.</p>

<p>Try to change your code to:</p>

<pre class="prettyprint"><code><div
  mdbModal
  #frame="mdbModal"
  class="modal fade left"
  id="frameModalTop"
  tabindex="-1"
  role="dialog"
  aria-labelledby="myModalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">Sign in</h4>
        <button
          type="button"
          class="close"
          data-dismiss="modal"
          aria-label="Close"
          (click)="frame.hide()"
        >
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <mdb-icon fas icon="lock" class="prefix grey-text"></mdb-icon>
          <input
            type="email"
            id="defaultForm-email"
            [formControl]="loginFormModalEmail"
            class="form-control"
            mdbInput
            mdbValidate
          />
          <label for="defaultForm-email">Your email</label>
          <mdb-error
            *ngIf="
              loginFormModalEmail.invalid &&
              (loginFormModalEmail.dirty || loginFormModalEmail.touched)
            "
          >
            Input invalid
          </mdb-error>
          <mdb-success
            *ngIf="
              loginFormModalEmail.valid &&
              (loginFormModalEmail.dirty || loginFormModalEmail.touched)
            "
            >Input valid
          </mdb-success>
        </div>

<div class="md-form mb-4">
          <mdb-icon fas icon="lock" class="prefix grey-text"></mdb-icon>
          <input
            type="password"
            id="defaultForm-pass"
            [formControl]="loginFormModalPassword"
            class="form-control"
            mdbInput
            mdbValidate
          />
          <label for="defaultForm-pass">Your password</label>
          <mdb-error
            *ngIf="
              loginFormModalPassword.invalid &&
              (loginFormModalPassword.dirty || loginFormModalPassword.touched)
            "
          >
            Input invalid
          </mdb-error>
          <mdb-success
            *ngIf="
              loginFormModalPassword.valid &&
              (loginFormModalPassword.dirty || loginFormModalPassword.touched)
            "
          >
            Input valid
          </mdb-success>
        </div>
      </div>
      <div class="modal-footer d-flex justify-content-center">
        <button mdbBtn color="default" class="waves-light" mdbWavesEffect>Login</button>
      </div>
    </div>
  </div>
</div>

<p>Best, Bartosz.</p>

Please insert min. 20 characters.

Dear @karl-heinz reichel

You have to call the show() method to show #frame modal, otherwise it will be not visible.

Try to change your code to:

<div
  mdbModal
  #frame="mdbModal"
  class="modal fade left"
  id="frameModalTop"
  tabindex="-1"
  role="dialog"
  aria-labelledby="myModalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">Sign in</h4>
        <button
          type="button"
          class="close"
          data-dismiss="modal"
          aria-label="Close"
          (click)="frame.hide()"
        >
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <mdb-icon fas icon="lock" class="prefix grey-text"></mdb-icon>
          <input
            type="email"
            id="defaultForm-email"
            [formControl]="loginFormModalEmail"
            class="form-control"
            mdbInput
            mdbValidate
          />
          <label for="defaultForm-email">Your email</label>
          <mdb-error
            *ngIf="
              loginFormModalEmail.invalid &&
              (loginFormModalEmail.dirty || loginFormModalEmail.touched)
            "
          >
            Input invalid
          </mdb-error>
          <mdb-success
            *ngIf="
              loginFormModalEmail.valid &&
              (loginFormModalEmail.dirty || loginFormModalEmail.touched)
            "
            >Input valid
          </mdb-success>
        </div>

        <div class="md-form mb-4">
          <mdb-icon fas icon="lock" class="prefix grey-text"></mdb-icon>
          <input
            type="password"
            id="defaultForm-pass"
            [formControl]="loginFormModalPassword"
            class="form-control"
            mdbInput
            mdbValidate
          />
          <label for="defaultForm-pass">Your password</label>
          <mdb-error
            *ngIf="
              loginFormModalPassword.invalid &&
              (loginFormModalPassword.dirty || loginFormModalPassword.touched)
            "
          >
            Input invalid
          </mdb-error>
          <mdb-success
            *ngIf="
              loginFormModalPassword.valid &&
              (loginFormModalPassword.dirty || loginFormModalPassword.touched)
            "
          >
            Input valid
          </mdb-success>
        </div>
      </div>
      <div class="modal-footer d-flex justify-content-center">
        <button mdbBtn color="default" class="waves-light" mdbWavesEffect>Login</button>
      </div>
    </div>
  </div>
</div>

<div>
  <button mdbBtn (click)="frame.show()">show</button>
</div>

Best, Bartosz.

Add comment

Write

Create snippet

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: 8.1.1
Device: PC
Browser: Any
OS: Linux
Provided sample code: No
Provided link: No

karl-heinz reichel

42Support score
2Questions 3Answers 0Snippets