Как отключить автофокус в ngb-модале - PullRequest
0 голосов
/ 03 февраля 2020

У меня проблема с отключением события автофокуса в моде ngb. Когда я нажимаю кнопку, появляется модал и формируется первый фокус ввода. Как это остановить? Вот пример:

onTransactionPasswordChange() {
    const account: Account = this.accountService.getUser(),
      modal: NgbModalRef = this.modalService.open(ChangePasswordComponent, {
        backdrop: 'static',
        size: 'lg',
      }),
      component: ChangePasswordComponent = modal.componentInstance;
    component.resetPassword = account.change_pass == 'true';
    component.transaction = true;
    component.account = account;
  }

Над модом открытия кода. И мой модальный контент:

<div class="btn btn-close float-right" (click)="onModalClose()">
  <i class="icon-close"></i>
</div>
<div class="login-container mt-4 col-md-12">
  <form (ngSubmit)="change()" autocomplete="off" [formGroup]="changeForm">
    <div class="card-body" id="change-form">
      <div class="text-center">
        <h1 class="card-title color-green mb-3">
          {{ getFormTitle() | translate }}
        </h1>
        <div class="alert alert-dark mt-5">
          <p *ngIf="transaction" class="text-left">
            - Нэвтрэх болон гүйлгээний нууц үг ижил байх боломжгүйг анхаарна уу
          </p>
          <p class="text-left">
            - Та өмнө ашиглаж байсан нууц үгээ дахин хэрэглэх боломжгүй
          </p>
        </div>
        <div class="alert alert-danger" *ngIf="changeErrorMessage">
          {{ changeErrorMessage }}
        </div>

        <div class="alert alert-danger" *ngIf="language == 'MON'">
          Та нууц үгээ зөвхөн латинаар оруулна уу
        </div>
      </div>
      <div class="form-group" (capsLock)="capsOn = $event" (languageEmitter)="language = $event">
        <label class="password-label" for="oldPassword">{{ getFirstInputTitle() | translate }}</label>
        <div
          *ngIf="
            (changeForm.get('oldPassword').invalid && changeForm.get('oldPassword').touched) ||
            (changeForm.get('oldPassword').invalid && submitted)
          "
        >
          <small class="text-danger" *ngIf="changeForm.get('oldPassword').errors.required" jhiTranslate="entity.validation.required">
            {{ getFirstInputTitle() | translate }}
          </small>
        </div>
        <div style="position: relative;">
          <input
            [attr.type]="passwordShown ? 'text' : 'password'"
            type="password"
            class="form-control form-control-rounded"
            name="oldPassword"
            id="oldPassword"
            placeholder="{{ getFirsInputPlaceholder() | translate }}"
            formControlName="oldPassword"
            latinOnly
            required
          />
          <div class="form-control-feedback">
            <i class="i-Lock-2 text-muted"></i>
          </div>
        </div>
      </div>
      <div class="form-group" (capsLock)="capsOn = $event" (languageEmitter)="language = $event">
        <label class="password-label" for="newPassword">{{ 'global.form.newpassword.label' | translate }}</label>
        <div
          *ngIf="
            (changeForm.get('newPassword').invalid && changeForm.get('newPassword').touched) ||
            (changeForm.get('newPassword').invalid && submitted)
          "
        >
          <small class="text-danger" *ngIf="changeForm.get('newPassword').errors.required">
            {{ 'entity.validation.required' | translate }}
          </small>
        </div>
        <div style="position: relative;">
          <input
            [attr.type]="passwordShown ? 'text' : 'password'"
            type="password"
            class="form-control form-control-rounded"
            name="newPassword"
            placeholder="{{ 'global.form.currentpassword.placeholder' | translate }}"
            id="newPassword"
            formControlName="newPassword"
            required
            latinOnly
          />
          <div class="form-control-feedback">
            <i class="i-Lock-2 text-muted"></i>
          </div>
        </div>
      </div>
      <div class="form-group m-0">
        <label for="passwordConfirm">{{ 'global.form.confirmpassword.label' | translate }}</label>
        <div
          *ngIf="
            (changeForm.get('newPasswordConfirm').invalid && changeForm.get('newPasswordConfirm').touched) ||
            (changeForm.get('newPasswordConfirm').invalid && submitted)
          "
        >
          <small class="text-danger" *ngIf="changeForm.get('newPasswordConfirm').errors.required">
            {{ 'entity.validation.required' | translate }}
          </small>
        </div>
        <div style="position: relative;">
          <input
            [attr.type]="passwordShown ? 'text' : 'password'"
            type="password"
            class="form-control form-control-rounded"
            name="newPasswordConfirm"
            id="newPasswordConfirm"
            placeholder="{{ 'global.form.currentpassword.placeholder' | translate }}"
            formControlName="newPasswordConfirm"
            required
          />
          <div class="form-control-feedback">
            <i class="i-Lock-2 text-muted"></i>
          </div>
          <div class="form-control-feedback" style="right: 0; left: auto;">
            <span class="text-size-mini text-primary text-muted">{{ language }}</span>
          </div>
        </div>
      </div>
      <div class="cursor-pointer mt-10 show-password margin-10">
        <span class="text-muted pull-left" (click)="showPassword()">
          <i class="icon-eye position-left"></i>
          Нууц үг {{ passwordShown ? 'нуух' : 'харуулах' }}</span
        >
        <span *ngIf="capsOn" class="text-warning">CAPS LOCK</span>
      </div>
      <div class="form-group mt-20 pt-20">
        <button type="submit" class="btn btn-success btn-block" id="btn" style="background-color: #2C8F40;">
          {{ 'entity.action.save' | translate }}
        </button>
      </div>
      <div class="text-right">
        <button type="button" *ngIf="transaction" class="btn btn-link" (click)="forgotPassword()">
          {{ 'global.form.change.forgot' | translate }}
        </button>
      </div>
      <div class="module-loader" *ngIf="loading">
        <div class="spinner spinner-bubble spinner-bubble-primary"></div>
      </div>
    </div>
  </form>
</div>

Вот результат:

enter image description here

Что я хочу, это когда модал открывает ввод не быть сосредоточенным. Есть идеи?

...