Date in formControlName not taking the value using reactive forms

Question

I am using reactive forms, in this if i click on date from the bootstrap calendar, the value is coming as empty, but if i change the selected date from the formControl input, then that value has been taken. I am not getting where i am going wrong.

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: [''],
})

Don't use Jquery with angular, check this for more info: stackoverflow.com/questions/53534894/… — Chellappan வ
Hi thanks for response, but based on my requirement that was the only way I found with very limited time, can you please help me to solve it — Bhrungarajni
There are lot of angular based date picker available ,can't you use that? — Chellappan வ
here, i need date time along with Am/pm, and in this project other plugins cannot be used. that is the main problem i had — Bhrungarajni

Chellappan வ Chellappan வ · Accepted Answer · 2020-02-02T08:11:57

Since using Jquery, you have to listen datepickerchange event to get datepicker value, then set the reactive form value manullay using setValue or patchValue.

Try this:

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});
      });
  }

Example

Date in formControlName not taking the value using reactive forms

1 Answers