Модальное закрытие и сброс значения формы не работают в Angular - PullRequest
Новая
       8

Модальное закрытие и сброс значения формы не работают в Angular

0 голосов
/ 29 августа 2018

Пересекая многие существующие вопросы, связанные с моим вопросом, я выкладываю это. Так что не комментируйте это как дубликат и отправляйте повторяющиеся ответы, мой сценарий немного отличается. Все решения связаны с Javascript или JQuery. Но я хочу в Angular.

Я использую mdBootstrap , предоставляя только ссылку CDN в index.html, но не устанавливаю ее. У меня есть всплывающее окно с вкладками для входа и регистрации. Проблема заключается в том, что после ввода учетных данных и щелчка по имени входа модальное имя не закрывается (я не хочу указывать data-dismiss = "modal"), поскольку оно закрывает модальное состояние без выполнения функции входа в систему. Я хочу, чтобы обе функции были выполнены, проверка учетных данных, если она недействительна, я хочу, чтобы модал был в открытом состоянии, говоря сообщение об ошибке. Если он действителен, то закрывается только модал.

Во-вторых, я хочу сбросить модальные значения формы, даже когда я щелкаю в любом месте за пределами модального и снова открываю модальное. Например, если у меня есть два поля ввода, такие как имя пользователя и пароль, я ввел только имя пользователя, оставив пароль пустым, щелкнул снаружи и снова открыл модал, мой модал открылся с введенным значением имени пользователя. Я хочу избавиться от этих проблем.

Кто-нибудь поможет мне решить эти проблемы. Заранее спасибо.

Log-Reg.component.html 

<div class="modal fade" id="modalLoginRegisterForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        //tabs for login & Register
        <div class="tab-content py-0">
          <div class="tab-pane fade in show active" id="modalLoginTab" role="tabpanel">
            <form #loginForm="ngForm">
              <div class="md-form">
                <input required [(ngModel)]="username" type="email" id="loginEmail" name="Username" class="form-control validate">
                <label for="loginEmail">Enter your email address</label>
              </div>
              <div class="md-form">
                <input required [(ngModel)]="password" type="password" id="loginPassword" name="Password" class="form-control validate">
                <label for="loginPassword">Enter your password</label>
              </div>
              <div *ngIf="isLoginError" class="alert alert-danger">Incorrect Credentials</div>
              <button type="button" [disabled]=!loginForm.valid class="btn btn-primary" (click)="onLogin()">Login</button>
            </form>
          </div>
          //Form for Register
        </div>
      </div>
    </div>
  </div>
</div>

Log-Reg.component.ts 

@ViewChild('loginForm') public userLoginForm : NgForm;

onLogin(){
//some function for login validation\
this.userLoginForm.reset();
}

Ответы [ 2 ]

0 голосов
/ 29 августа 2018

Из вашего комментария я предполагаю, что вы не смогли закрыть модал после входа в систему,

вы не импортируете модальную директиву в свой компонент

Модальный шаблон .html файл 

 <div mdbModal #loginModal="mdbModal" class="modal fade" id="modalLoginRegisterForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        //tabs for login & Register
        <div class="tab-content py-0">
          <div class="tab-pane fade in show active" id="modalLoginTab" role="tabpanel">
            <form #loginForm="ngForm">
              <div class="md-form">
                <input required [(ngModel)]="username" type="email" id="loginEmail" name="Username" class="form-control validate">
                <label for="loginEmail">Enter your email address</label>
              </div>
              <div class="md-form">
                <input required [(ngModel)]="password" type="password" id="loginPassword" name="Password" class="form-control validate">
                <label for="loginPassword">Enter your password</label>
              </div>
              <div *ngIf="isLoginError" class="alert alert-danger">Incorrect Credentials</div>
              <button type="button" [disabled]=!loginForm.valid class="btn btn-primary" (click)="onLogin()">Login</button>
            </form>
          </div>
          //Form for Register
        </div>
      </div>
    </div>
  </div>
</div>

В вашем файле компонентов ( appcomponent.ts ) попробуйте это 

import { ModalDirective } from 'ng-mdb-pro/free/modals/modal.directive';

    @ViewChild('loginModal') _loginModal: ModalDirective;

    onLogin(){
    *add your login logic in your success add the below code*
    this._loginModal.hide()
    }

надеюсь, что это решит вашу проблему

0 голосов
/ 29 августа 2018

Попробуйте это. 

this.userLoginForm.form.reset()

или 

this.userLoginForm.resetForm()
...