icheck- bootstrap - это чистые css флажки и переключатели для Twitter bootstrap. Это означает, что он будет работать с любой из библиотек внешнего интерфейса. По крайней мере, я так понял ... И действительно, его использование из readme его страницы github для библиотеки: Ссылка на icheck- bootstrap демо с документами Работает ли у него только одна сторона? эффект, с которым я могу жить.
В одном месте, где я пытаюсь использовать эту библиотеку, компонент находится в модальном диалоговом окне, которое используется для входа на сайт. Ниже приведен код шаблона html для компонента:
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" aria-hidden="true" (click)="hideModal()">
<span aria-hidden="true">×</span>
</button>
<h3 class="modal-title-site text-center"> Login to Rove </h3>
</div>
<form #f="ngForm" (ngSubmit)="onSubmit()">
<div class="modal-body">
<div class="form-group login-username">
<div>
<input name="log" id="login-user" class="form-control input" size="20"
[(ngModel)]="model.email" placeholder="Enter User Email" type="email">
</div>
</div>
<div class="form-group login-password">
<div>
<input name="Password" id="login-password" class="form-control input" size="20"
[(ngModel)]="model.password" placeholder="Password" type="password">
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<span class="checkbox login-remember">
<input name="rememberme" value="forever" checked="checked"
[(ngModel)]="model.rememberMe" type="checkbox">
<label for="rememberme">Remember Me</label>
</span>
</div>
</div>
<div>
<div>
<input name="submit" class="btn btn-block btn-lg btn-primary" value="LOGIN" type="submit">
</div>
</div>
</div>
</form>
<div class="modal-footer">
<p class="text-center">
Not here before? <a data-toggle="modal" data-dismiss="modal"
href="#ModalSignup">Sign Up.</a> <br>
<a href="forgot-password.html"> Lost your password? </a>
</p>
</div>
Приведенный выше код не содержит реализованный код icheck- bootstrap. Ниже я изменил ключевые строки кода, который будет реализовывать флажок в соответствии с документацией readme на сайте github
<div class="icheck-success checkbox login-remember">
<input id="rememberme" value="forever" checked="checked"
[(ngModel)]="model.rememberMe" type="checkbox">
<label for="rememberme">Remember Me</label>
</div>
этот код работает в соответствии с readme, к сожалению, после закрытия диалога модальность из модального диалогового окна остается, и главная страница за ним не позволяет вводить данные с клавиатуры или мыши.
Обратите внимание на тег ввода в эффективных строках, у меня есть изменение от атрибута name к атрибуту id. Это кажется мне неправильным, но, как следует из документации, единственный способ, которым это будет работать полностью. Если я не изменю атрибут с name на id, флажок изменится на правильный стиль, но он не будет проверять, чтобы показать истинное состояние. Фактически, если я удаляю класс icheck-success из атрибута class вышеприведенной строки div, поведение идентично, и компонент все равно не будет вводить данные после закрытия диалогового окна, если я использую атрибут id вместо атрибута name.
Я использую Angular V9, и компонент диалога, который я использую, взят из библиотеки Valor Software ngx- bootstrap, и, как уже было сказано, он отлично работает, когда я кодирую тег ввода html с атрибутом имени. Кто-нибудь знает об обходном пути или, возможно, что здесь происходит? стиль - это то, что мне нужно на сайте, но не за счет отсутствия диалога входа в систему, чтобы эффективно заблокировать сайт после входа в систему.
Спасибо за любую информацию, которая может у вас быть по этому вопросу.