适配ngbDatepicker组件时日历图标在输入框错位如何解决

问题描述 #

我想为validity字段创建一个日历选择框：

我的初始代码如下：

<div class="col-12 col-12 col-md-4 col-lg-2">
    <div class="form-group">
        <label for="validity">Validaty</label>
            <input id="validity" name="validity" type="text" class="form-control"
                [(ngModel)]="order.validity"
                style="background-color: white; max-width: 300px;width: 100%;"
                placeholder="Validity" autofocus>
    </div>
</div>

我参考了正常的日历字段实现：

参考用的代码如下：

<div class="form-group row">
 <label for="picker2" class="col-12 col-sm-4 col-form-label">{{'startDate | t }}</label>
    <div class="col-12 col-sm-8">
       <div class="input-group" style="background-color: white; max-width: 300px;">
         <input id="picker2" class="form-control" placeholder="yyyy-mm-dd" name="dp2"
            ngbDatepicker #dp2="ngbDatepicker" [(ngModel)]="search.enddate">
               <div class="input-group-append" (click)="dp2.toggle()">
                     <div class="input-group-text">
                         <i class="icon-regular i-Calendar-4"></i>
                      </div>
                </div>
        </div>
    </div>
</div>

我尝试对初始代码进行适配改造，但改造后日历图标在输入框上的位置错误，不清楚问题出在哪里，需要排查。适配后代码如下：

<div class="col-12 col-12 col-md-4 col-lg-2">
    <div class="form-group">
        <label for="validity">{{'3735' | t}}</label>
         <input id="validity" name="validity"  class="form-control" placeholder="yyyy-mm-dd" name="dp2"
            ngbDatepicker #dp2="ngbDatepicker"
            [(ngModel)]="order.validity "
            style="background-color: white; max-width: 300px;width: 100%;"
            placeholder="Validity" autofocus>

            <div class="input-group-append" (click)="dp2.toggle()">
                 <div class="input-group-text">
                     <i class="icon-regular i-Calendar-4"></i>
                  </div>
            </div>
    </div>
</div>

修复方案 #

图标错位的核心原因是没有用Bootstrap的input-group容器包裹输入框和日历图标模块，input-group-append是输入组专用组件，必须嵌套在input-group内部才能和输入框横向拼接。除此之外代码还有几个冗余问题：input节点重复定义了name属性和placeholder属性，[(ngModel)]绑定的变量后面多了多余空格。

修复后的完整代码如下：

<div class="col-12 col-md-4 col-lg-2">
    <div class="form-group">
        <label for="validity">{{'3735' | t}}</label>
        <!-- 新增input-group容器 -->
        <div class="input-group" style="background-color: white; max-width: 300px;width: 100%;">
            <input id="validity" name="validity" class="form-control" placeholder="yyyy-mm-dd"
                ngbDatepicker #dp2="ngbDatepicker"
                [(ngModel)]="order.validity"
                autofocus>
            <div class="input-group-append" (click)="dp2.toggle()">
                <div class="input-group-text">
                    <i class="icon-regular i-Calendar-4"></i>
                </div>
            </div>
        </div>
    </div>
</div>

内容的提问来源于stack exchange，提问作者elodie