У меня проблема с отключением события автофокуса в моде 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>
Вот результат:
Что я хочу, это когда модал открывает ввод не быть сосредоточенным. Есть идеи?