时间戳

首页 > 解决方案 > 为什么这种输入类型 =“复选框”的 html 模式会破坏 ngx-bootstrap 模式对话框

html - 为什么这种输入类型 =“复选框”的 html 模式会破坏 ngx-bootstrap 模式对话框

问题描述

icheck-bootstrap 是用于 Twitter 引导的纯 CSS 复选框和单选按钮。这意味着它可以与任何前端库一起使用。至少我是这么想的......事实上，他在他的 github 页面的自述文件中对库的使用：Link to icheck-bootstrap demo with docs确实有效，它只是有一个我可以忍受的副作用。

在我尝试使用此库的至少一个地方，该组件位于用于登录该站点的模式对话框中。下面是该组件的 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">&times;</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 实现的代码。下面我根据 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>

不幸的是，此代码按照自述文件工作，在关闭对话框后，模态对话框的模态仍然存在，并且它后面的主页不允许来自键盘或鼠标的任何输入。

请注意有效行中的输入标记，我已从 name 属性更改为 id 属性。这对我来说似乎是错误的，但是正如文档所暗示的那样，它是完全起作用的唯一方法。如果我不将属性从名称更改为 id，复选框将更改为正确的样式，但不会检查以显示真实状态。实际上，如果我从上述 div 行的 class 属性中删除 icheck-success 类，则行为是相同的，如果我使用 id 属性而不是 name 属性，则在关闭对话框后组件仍然不会接受输入。

我正在使用 Angular V9，我正在使用的对话框组件来自 Valor Software ngx-bootstrap 库，如上所述，当我使用 name 属性对 html 输入标签进行编码时，它可以完美运行。有没有人知道解决方法或可能这里发生了什么？样式是我在网站上想要的，但不以登录后没有登录对话框有效锁定网站为代价。

感谢您提供有关此问题的任何信息。

标签： htmlcssangular

解决方案

我已经解决了我遇到的问题。问题的第一部分是我没有问正确的问题。我认为我已经编辑了这个问题，以便以更好的方式提出问题。

我已经用下面的 html 解决了这个问题：

    <div class="icheck-success checkbox login-remember">
        <input id="rememberme" name="rememberme" [(ngModel)]="model.rememberMe" type="checkbox">
        <label for="rememberme">Remember Me</label>
    </div>

似乎出于某种我完全不清楚的原因，我必须在输入标签中有一个名称属性，但是，这是我所做的，以使模式对话框在关闭后从页面中真正清除。

推荐阅读