question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Does not work inside a <form> tag

See original GitHub issue

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.

Issue Analytics

  • State:open
  • Created 5 years ago
  • Comments:6

github_iconTop GitHub Comments

1reaction
stevebrosharcommented, Feb 1, 2019

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/

1reaction
stevebrosharcommented, Jan 27, 2019

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: [‘’], …

Read more comments on GitHub >

github_iconTop Results From Across the Web

why <a href> tag doesn't work inside a form - Stack Overflow
1. Links will not submit the form. You need an <input type="submit"> or <button type="submit"> for that. · 1. Are you attempting to...
Read more >
HTML form tag - W3Schools
Attributes ; name, text, Specifies the name of a form ; novalidate, novalidate, Specifies that the form should not be validated when submitted...
Read more >
Submit Button not working inside form tag - Laracasts
Hey Guys, I'm trying to send data to controller with a form i have assigned action both as url and controller but still...
Read more >
Grid does not work inside a FORM tag - ActiveWidgets
A FORM tag will be needed for INPUTs if you need to support older browsers such as Netscape 4. Without the FORM tag,...
Read more >
The Form element - HTML: HyperText Markup Language | MDN
off : The browser may not automatically complete entries. (Browsers tend to ignore this for suspected login forms; see The autocomplete ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found