Дата в formControlName не принимает значение с помощью реактивных форм

Question

Я использую реактивные формы, в этом случае, если я нажимаю на дату в календаре bootstrap, значение становится пустым, но если я изменяю выбранную дату из ввода formControl, то это значение принимается. Я не понимаю, где я иду не так.

DEMO

HTML:

<div class="form-group">
                <label for="">Premium Commitment Date</label>
                <input type="text" class="form-control" placeholder="MM/DD/YYYY" formControlName="premiumCommDate"
                  name="premiumCommDate"></div>

Ts:

 $('.onlyDate').datetimepicker({
        format: 'L'
      });

this.agentbasicInfoForm = this.FB.group({
        premiumCommDate: [''],
})

Answer 1

Поскольку с помощью Jquery вам необходимо прослушать событие datepickerchange, чтобы получить значение datepicker, а затем установить значение реактивной формы manullay с помощью setValue или patchValue.

Попробуйте это:

date(event,i) {
   $('.onlyDateTime').datetimepicker();
      $('.onlyDate').datetimepicker({
        format: 'L'
      });
   $('.onlyDate').datetimepicker(
    { format: 'L' }).on('dp.change', (e)=>{
      const date = e.date.format('L');
      this.getFormData.at(i).get('signatureDate').setValue(date,{emitEvent:false});
      });
  }

Пример