Question

我从6号角创建法线电抗

<div class="input-group date">
    <input type="text" class="form-control m-input m_datetimepicker"  placeholder="Select auction start date & time" 
        formControlName="addStartDate" [ngClass]="{ 'is-invalid': addForm.get('addStartDate').touched && addForm.get('addStartDate').invalid }" />
    <div class="input-group-append">
        <span class="input-group-text"><i class="la la-calendar-check-o glyphicon-th"></i></span>
    </div>
    <div class="invalid-feedback">
        <div>* Time start date & time is required</div>
    </div>
</div>

因此，我使用基本的jquery来初始化日期时间选择器

$("body").on("focus", ".m_datetimepicker", function () {
    $(".m_datetimepicker").datetimepicker({
        autoclose: true,
        todayBtn: true,
        keepOpen: false,
        startDate: today,
        dateFormat: 'dd/mm/yy',
    });
});

它可以工作，但是当我们以日期时间形式使用时，但是this.addForm.value列表示日期时间选择器值未与该formControlName绑定，它给了我null的价值。有人可以告诉我为什么吗？

Answer 1

您不应将jQuery和基于jQuery的库与Angular一起使用。这是整个Angular概念的矛盾。您也不应直接在DOM上操作以保持与Angular服务的不同环境兼容。

要在DOM树上安全操作，请使用内置渲染器-Renderer2（必须注入到组件中）

尝试改用ngx-bootstrap库。它是针对Angular量身定制的： https://www.npmjs.com/package/ngx-bootstrap

编辑这是在ngx-bootstrap中使用datepicker的示例： https://stackblitz.com/edit/ngx-bootstrap-datepicker

Bootstrap日期时间选择器不适用于Angular 6或7

1 个答案: