Does not work inside a <form> tag

[sandervh14]

Hi,

I found out that the basic example of the date time picker does not work when it is inside a form element:

<form>
<div class="example-wrapper">
    <h2>Basic</h2>
    <label class="example-input-wrapper">
      Date Time:
      <input placeholder=""
             [(ngModel)]="dateTime"
             [owlDateTimeTrigger]="dt" [owlDateTime]="dt">
      <owl-date-time #dt></owl-date-time>
    </label>
    <h4>Value From Picker: {{dateTime}}</h4>
  </div>
</form>

Whenever one selects a date and time with the picker and clicks the 'set' button, nothing is displayed next to "Value From Picker: ".

From the moment one removes the <form></form> around the date time picker, the date and time appears next to "Value From Picker: ".

It took me a long time to find out that it was the form tag and could rework my page without it, but I wanted to let you know. I'm sure other people will be stuck on this too.

Kind regards.

[stevebroshar]

I'm using the date/time picker in a form -- a reactive form. The code below shows alot of stuff not related to your issue but I didn't want to delete too much, so here it is:

                        <mat-form-field appearance="standard" class="wide-input">
                            <mat-label>Start and end date/time</mat-label>
                            <input matInput [style.width]="'350px'" formControlName="startEndRange" [selectMode]="'range'"
                                [owlDateTime]="startEndInput"
                                placeholder="{{queryControl.value.dateRangeHint}}">
                            <mat-error>{{startEndRangeControl.errors | validationErrorMessage}}</mat-error>
                        </mat-form-field>
                        <span class="example-trigger" [owlDateTimeTrigger]="startEndInput">
                            <i class="fas fa-calendar-alt fa-lg"></i>
                        </span>
                            <button mat-icon-button matSuffix *ngIf="startEndRangeControl.value && startEndRangeControl.value[0] || startEndRangeControl.value[1]" (click)="startEndRangeControl.setValue('')" aria-label="Clear">
                            <i class="fa fa-times"></i>
                        </button>
                        <owl-date-time #startEndInput></owl-date-time>

in the TS: this.form = this._formBuilder.group({ startEndRange: [''], ...

[sandervh14]

Your code example is indeed not that clear. Honestly I don't care anymore, I solved the problem in my project. I just filed this issue because I think other people will try to make simple HTML forms with (ngSubmit)="" too, and will encounter the same problem.

[sugandansa]

Hi,

I found out that the basic example of the date time picker does not work when it is inside a form element:

<form>
<div class="example-wrapper">
    <h2>Basic</h2>
    <label class="example-input-wrapper">
      Date Time:
      <input placeholder=""
             [(ngModel)]="dateTime"
             [owlDateTimeTrigger]="dt" [owlDateTime]="dt">
      <owl-date-time #dt></owl-date-time>
    </label>
    <h4>Value From Picker: {{dateTime}}</h4>
  </div>
</form>

Whenever one selects a date and time with the picker and clicks the 'set' button, nothing is displayed next to "Value From Picker: ".

From the moment one removes the <form></form> around the date time picker, the date and time appears next to "Value From Picker: ".

It took me a long time to find out that it was the form tag and could rework my page without it, but I wanted to let you know. I'm sure other people will be stuck on this too.

Kind regards.

You can use mat form field it will work

[stevebroshar]

Your code example is indeed not that clear. Honestly I don't care anymore, I solved the problem in my project. I just filed this issue because I think other people will try to make simple HTML forms with (ngSubmit)="" too, and will encounter the same problem.

@sanderzz91: I find your response to be flippant. If you don't care then keep your criticism to yourself. From now on, I am no longer talking to you. I am talking to those in the community who do care.

I think the issue is a more general angular issue ... not an issue with this control. When you use any control in a form, you have to setup binding differently. You use formControlName instead of [(ngModel)], and you create a form control object in the class.

Further, there are two types of forms: template and reactive. My point is that one needs to understand how to build forms before trying to use this (or any) control in a form. You cannot expect to use sample code that is non-form in a form without modifying it.

I know that my answer is somewhat general in nature. I could build you a gist or something. But I don't have time for that. The answer is one needs to understand how to build angular forms. Google and learn about that. Then apply that to this control. That is exactly what I did and it does work.

This seems helpful: https://blog.angular-university.io/introduction-to-angular-2-forms-template-driven-vs-model-driven/

[rskendzic]

@stevebroshar Cheers mate for the help. I would add, that result of [selectMode]="'range'" is an array containing two date object.

[jayananuranga]

I have the same issue How to fixed this issue. inside the fome tag I can not get the timepicker