I have many input fields in the form and I want to move to next input if user press "Go" button on keyboard. I found cordova-plugin-keyboard and ionic-plugin-keyboard plugins for this, but I don't know how to implement the functionality exactly.
If you have any other solution for this problem, please share. I am using IONIC3.
Thanks
<input round class="input-container font_style" maxlength="50" placeholder="Email" type="text" [(ngModel)]="email">
Related
I have an HTML form with a date field:
<input type="date" class="form-control" placeholder="Date" name="date" autocomplete="off" required>
Before submitted the form, I want to ensure that the date that was entered is greater than the current date. If it is older, then I want to show a custom form validation to say something like, "You must enter a date past today.".
Do you suggest I do this validation on the backend or the frontend? Thanks!!
I think you're better off doing in within django forms. The reason is, if you do it in the front-end, you'll have to repeat the code when applying this property elsewhere.
I am about to learn how to automate processes with Camunda and the Camunda Modeler.
Therefore, I set up a small test process with two user tasks, a decision table and a service task. Everything works fine, except one of the user tasks.
In the mentioned user task, I want to embed a little HTML-Form which looks like this:
<form role="form" name="form">
<div class="form-group">
<label for="download">Travel request to review</label>
<a id="download" cam-variable-name="downloadRequest" cam-file-download="travelRequestDocument"></a>
</div>
<div class="form-group">
<label for="checkboxApproved">I approve this travel request.</label>
<input
id="checkboxApproved"
type="checkbox"
cam-variable-name="approved"
cam-variable-type="boolean"
class="form-control" />
</div>
</form>
I embedded it through the form key property in the Camunda Modeler:
embedded:deployment:forms/approval.html
When I go to Camunda tasklist (Camunda engine runs on local tomcat server) and open the task, it says: Form failure: Value 'on' is not of type boolean.
I searched the internet back and forth for reasons which could cause this error, but I couldn't find anything useful.
Maybe someone here has experience with this kind of problem?
I would be very thankful :)
The solution is quite simple: I just have to replace the "boolean" with "Boolean" (uppercase 'b').
I hope this answer will save others from hours of research... (like me)
This ionic page is just a form with some elements. In the Phone field, I have created a modal that opens when you click on an image:
<ion-grid>
<ion-row>
<ion-col>
<form #registerForm="ngForm" novalidate [formGroup]="form">
[...]
<ion-item>
<img item-left margin-left src={{flagPath}} (click)="presentCountryModal()">
<p item-left (click)="presentCountryModal()">+{{countryCode}}</p>
<ion-icon item-left name="arrow-dropdown" (click)="presentCountryModal()">
</ion-icon>
<ion-input
placeholder="Phone"
type="text"
[(ngModel)]="account.phone"
name="phone"
required
pattern=".{8,}"
#phone="ngModel"
></ion-input>
</ion-item>
It works perfectly on iOS and Windows on ionic-lab. But in Android the behavior is different: when I click on the image, the Phone ion-input gets the focus and the whole form moves up, making space for the keyboard and hiding the field under the header.
I'd like to:
1) Be able to make the image clickable.
2) Disable the automatic scrolling when an ion-input gets focused. I've tried keyboard.disableScroll(true) with no success.
Any ideas? Thanks!
UPDATE:
As explained here, adding .input-cover { position: static; } to the scss files stabilizes the form and makes the image click event responsive! So that solves the first question.
But I still have the problem that, when the keyboard opens, the whole page moves up and the top elements hide below the header (and you can't scroll them down).
1) You need to make a separated ion-item form the img. If you have an ion-input inside an ion-item, everything you put together will be "part" of that input.
2) The easiest way to do this without manipulating via ts is using a regular input, not the ion-input or using the ion-input inside a div instead of the ion-item. The second one i'm just guesing, since the behaviour of the scroll for showing the keyboard happens if you have an ion-input inside ion-item.
Hope this helps :)
<div draggable="true">
{{input value="default value" }}
</div>
In ember.js, as above code, when the div element has an attribute 'draggable="true"', on the webpage, the input area must need a double-click to edit in ie-11, but in chrome or firefox, it just need a click event to edit. Has anyone resolved this issue?
seems to be a bug
[IE 11] Input field of type text does not respond to mouse clicks when ancestor node has draggable=true
bad workaround:
<div style="background-color:lightgray" id="dragE" draggable="true">
<input id="inputE" type="text" />
</div>
click on the lightgray background
now the input field support single click
$('#dragE').focus(); <br>
$('#inputE').focus();<br>
was my solution
unfotunately reproducing with pluncer & co. did not work.
Or...set attribute draggable to "false", when the page goes to a production environment.
This worked for us.
I have a simple form that I want to be shown on a button click. i.e a button says "Add new User", then a the page expands and a form is shown, after the user finishes work with the form the form collapse back and a message is shown to the user.
The first problem i am facing is:
using this code
function AngularUI($scope, $window) {
$scope.collapse = function (selector) {
angular.element(selector).collapse();
}
}
and
<div class="ang-ui-test">
<button ng-click="collapse('#collapsible')">
using angular.element
</button>
<div id="collapsible" class="collapse">
some thing in here ...... !
</div>
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
simple collapsible
</button>
<div id="demo" class="collapse in">This one work properly</div>
</div>
the second one that does not uses angular.element.collapse works properly.
The second problem is : how do I test the behavior mentioned above.
on the first button press, the one that uses angular.element if the div is hidden it is shown but, it does not hide the collapsible after it is shown.
( i.e a button says "Add new User", then a the page expands and a form is shown, after the user finishes work with the form the form collapse back and a message is shown to the user.
thanks in advance.
You're doing it wrong. It's bad juju to do DOM manipulations in the controller because you are trying to look for / manipulate the DOM before it had a chance to render/refresh/update. Think of all the JS in the controller being executed in it's own phase, and THEN all the HTML is updated to reflect the final model state.
Try using ng-class="{collapse:someBoolExpression}"
You could also take a look at ui-hide, ui-show and ui-toggle (from AngularUI, but I think we should probably add a ticket to let you customize the class used.
Try to get the mindset of doing DOM manipulation manually out of your head. It takes a while, but once you get used to it your development speed picks up exponentially. When you finally hit a wall where Angular can't already do the job for you, start reading up on directives and checkout AngularUI's source code for some good, commented examples.