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: https://stackoverflow.com/questions/53534894/is-it-a-bad-practice-to-use-jquery-in-angular — Chellappan வ, Feb 02 '20 at 06:44
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, Feb 02 '20 at 06:49
There are lot of angular based date picker available ,can't you use that? — Chellappan வ, Feb 02 '20 at 06:54
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, Feb 02 '20 at 06:59
sorry, il change code, here for more things i have added this date calendar this, can you please check for signature date — Bhrungarajni, Feb 02 '20 at 07:03
is that signature date fine, or shall i give with premiumCommDate? — Bhrungarajni, Feb 02 '20 at 07:05
Stackblitz example does not have any jquery code, In which place are you getting date picker value? — Chellappan வ, Feb 02 '20 at 07:12
in stackblitz i have updated jquery code as well, sorry i had forgot to fork it, now everything is available there. — Bhrungarajni, Feb 02 '20 at 07:14
Since you using jquert datepicker you have to use jqueryDate picker event to get date — Chellappan வ, Feb 02 '20 at 08:01
yes sure, please let me know when you get free time, i am badly struck here — Bhrungarajni, Feb 03 '20 at 13:25
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/207104/discussion-between-bhrungarajni-and-chellappan-). — Bhrungarajni, Feb 03 '20 at 13:30
@Chellappanவ i have added stackblitz code, https://stackblitz.com/edit/github-ck3u8u-ia2p6q?file=src%2Fapp%2Fuser-table%2Fuser-table.component.html — Bhrungarajni, Feb 06 '20 at 10:40

score 1 · Accepted Answer · answered Feb 02 '20 at 08:11

1

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

answered Feb 02 '20 at 08:11

Chellappan வ

23,645
3
29
60

any idea about my other question of phone number validators – Bhrungarajni Feb 02 '20 at 08:16
when you get free time, can you please help me in this https://stackoverflow.com/questions/59992013/how-to-throw-validation-message-when-there-is-some-change-in-the-edit-item-usin? – Bhrungarajni Feb 02 '20 at 09:05
have you got time to go through my question? – Bhrungarajni Feb 02 '20 at 14:53
Will check and let you know! – Chellappan வ Feb 03 '20 at 05:27
Hi, from this answer, can you please help me out to bind values for the array of objects which dont have formControl name – Bhrungarajni Feb 03 '20 at 13:28
for date i have only ngModel, and the date value is taking if i manually change the date, but not taking the date from the calender, i tried with ngModelChange also but its not working – Bhrungarajni Feb 06 '20 at 05:01
Hi Bro @Bhrungarajni Can you share stackblitz. If it's not complicated i will give immediately else it will take some time – Chellappan வ Feb 06 '20 at 10:35
https://stackblitz.com/edit/github-ck3u8u-ia2p6q?file=src%2Fapp%2Fuser-table%2Fuser-table.component.html – Bhrungarajni Feb 06 '20 at 10:39
Try this: dateRestriction(event,restriction) { $('.onlyDateTime').datetimepicker(); $('.onlyDate').datetimepicker({ format: 'L' }); $('.onlyDateTime').datetimepicker( ).on('dp.change', (e)=>{ const date = e.date; console.log(e.date.format('L')); this.Restrictions[restriction].datetime = e.date.format('L') }); } – Chellappan வ Feb 06 '20 at 10:58
hi, here you are considering only date format, but i need both daate and time – Bhrungarajni Feb 06 '20 at 11:15
You have to check the JQuery date picker documentation – Chellappan வ Feb 06 '20 at 11:16
https://stackoverflow.com/questions/60088398/how-to-bind-value-to-the-array-of-object-based-on-date-selection-in-angular8 – Bhrungarajni Feb 06 '20 at 11:19
we shall talk there, i am getting date time with full length in other 2 dateTime values – Bhrungarajni Feb 06 '20 at 11:19

Date in formControlName not taking the value using reactive forms

1 Answers1