Does not work inside a <form> tag
See original GitHub issueHi,
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:
- Created 5 years ago
- Comments:6
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@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/
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:
in the TS: this.form = this._formBuilder.group({ startEndRange: [‘’], …